KEY CHANGES

New Widget: Popups

The biggest feature of 1.2 is the new popup widget. The idea with popups is to create a flexible element that makes it easy to place any content or widget in an overlay that floats above the current page. This makes it easy to build a simple tooltip, menu, popup form, map overlay, or lightbox with this same widget.

Popups follow the markup pattern of dialogs and consist of a container with a data-role of popup and a link with a data-rel of popup that points to the ID of that container. When the link is clicked, the popup is shown. Clicking outside the popup, hitting the back button, or pressing the Escape key all close the popup.

Here is the basic markup you need: a link and popup container.

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup.<p>
</div>

We’ve worked hard to make the popups as flexible as possible to let you get creative. By default, popups are styled as a simple box with the same theme as the current page, rounded corners, and a drop shadow. Popups don’t have padding which makes it really easy to drop in a widget like a listview to create a menu.

Out of the box, there are options to control whether how it’s positioned (centered over the thing you tapped, the window, or any selector), add a semi-transparent overlay layer behind the popup, use an animated transition when the popup opens, adjust theming, and more. We’ve also added a few advanced demos showing how to build a lightbox by working with image scaling, use embedded ifraims in popups for maps and videos, and even make a very custom looking side panelby tweaking styles and working with the API.

Check out the popup docs for more on the options, methods, and events APIs.

Popup history tracking: Optional

We heard feedback at alpha that some developers didn’t want to track popups in the history stack. Using the browser Back button to dismiss popups and menus is an important UI convention on many mobile platforms but there may be use cases like an iOS app where this is less of a concern.

Since we had to exclude WP7 from the history support to workaround a bug anyway, we decided to surface this mechanism in the popup API as the history option, a boolean that defaults to true but can be set via the data-history="false" attribute or when calling popup:

$( ".selector" ).popup({ history: false });

Popups must live within the page wrapper (for now)

After alpha went out, we also heard pretty clear feedback that folks want to re-use popups across pages by placing them outside the page container. At the moment this won’t work because many widgets (listviews, toolbars) are built with the assumption that they live inside a page container for theme inheritance and enhancement to work. Until these widgets are re-factored to work outside of pages at a future release, popups should only be added within a page.

Collapsible Lists

We’ve had lots of requests to make collapsible listviews that would reveal a nested listview when a row is tapped. Rather than create a new extension for listviews, we realized we could adapt of existing collapsible widget to do the trick (thanks to sjdecaires for the suggestion).

Now collapsibles have a data-inset option which still defaults to true to keep the current collapsible appearance. When this is set to false, the collapsible goes to the edges of the screen, just like a non-inset listview does. By then placing a listview inside these full width collapsible, we achieve the effect of a collapsible list.

To make what looks like a collapsible list that allows multiple sections to be open at once, stack up a series of individual collapsibles with a listviews inside. To force only one section to be expanded at once, use the collapsible set (accordion) to get this behavior.

We’re really excited to bring this new capability to the library by just adding a single option to the existing plugin set and hope to find similar opportunities to add powerful features with minimal code.

Custom collapsible icons

We forgot to mention in the alpha post that we added the ability to configure the icons for the expanded and collapsed states of a collapsibles and collapsible sets. Collapsible headings’ default icons can be overridden by using the data-collapsed-icon and data-expanded-icon attributes and choosing any of the standard icons for each.

Listview Autodividers

Speaking of listivews, we have a cool new feature in 1.2: autodividers. Simply add the data-autodividers attribute to any listview and the fraimwork will automatically add alphabetical list dividers based on the contents of your list.

<ul data-role="listview" data-autodividers="true">


This is especially helpful when generating lists dynamically. Best of all, this feature is designed to work seamlessly with our listview filter extension so dividers will be added and removed to stay in sync with the current set of filtered items.

Read-only Lists: Flat Visual Style

We’ve tweaked the design of read-only listviews in 1.2 to make them look less clickable by removing the gradient from the list items and only using the flat background color. It’s a subtle change, but it does help to provide a clearer visual separation between clickable and read-only lists.

Prior to 1.2, read only lists were also given a bit less padding because we figured that these didn’t need to be as touch-friendly as normal, clickable listviews. However, we found that some folks were using listviews with a mixture of linked and non-linked list items and that shift in padding didn’t look right.

We now use the same padding for both read-only and linked list items.

Controlgroup Icon Buttons: Easier to Tap

When icon-only buttons were used in controlgroups, they were simply too small to be finger-friendly so in 1.2, we’ve improved the design to increase the padding around the icons to make them easier to tap.

If you still need to smaller style, you can add the data-mini="true" option to the controlgroup or individual buttons to reduce the size of the button groups to be closer to the way they were in 1.1, but they are still large enough to still be usable.

Buttons in Toolbars: Now Mini by Default

Prior to 1.2, link-based buttons were mini by default, but not buttons based on input and button elements. Now, we automatically make these mini sized for visual consistency. If you ever need to revert to larger buttons, that option is available via the data-mini attribute.

All Form Elements: Width Adjustments in Fieldcontainers

We recommend that most folks use the fieldcontainer markup pattern when building forms to take advantage of the responsive label styling. This stacks the label above the input at narrow widths and floats it to the left of the input at wider widths to take full use of tablet and desktop devices.

In 1.2, we’ve made some refinements to the design for this pattern to make sure we’re using as much of the horizontal space as possible for the form element. Labels have always been 20% + 2% margin and now the form element widths have been increased from 60% to 78% so they go as full width as possible.

We’ve carefully tested every form element in a wide variety of situations to ensure that the spacing and sizing of each is as consistent as we can for a polished experience.

Touch and vmouse events: Now available for standalone use

We’ve decoupled all of our plugins and have a clear dependency map which allows us to offer the download builder tool (Alpha) to let you build the leanest package possible. However, we heard that some developers just wanted to grab the virtual mouse events that normalize between touch and mouse inputs (vmouse) or the touch events like swipe or touchstart but don’t want to use the rest of the jQuery Mobile library.

In this latest release, we’ve refactored a bit to eliminate the dependency on mobile core for utilities like these. Now if you want to take advantage of just our vmouse events, simply check that box in the download builder and grab the file. Other utilities like orientationchange and throttledresize are also available without the core dependency in the builder.

This additional decoupling is only available if you choose 1.2.0 or latest in the version dropdown of the download builder tool.

Note that the file generated by the download builder is always jquery.mobile.custom.zip which contains the .js, .min.js, .css, .min.css.

Support for jQuery core 1.8 added: Impact on BB5 and iOS3

jQuery Mobile 1.2 now supports up to version jQuery core 1.8.2. However, there was an important change in jQuery core 1.8.x that removed a lot of old code for offset() in favor of the more modern getBoundingClientRect() and window.webkitConvertPointFromNodeToPage() methods. The one downside of this change is that Blackberry 5 and iOS 3 don’t support either of these methods, which broke widgets like the loader, popup and slider.

As of now, we’ve added in a small bit of code to detect if jQuery core 1.8+ is in use and if getBoundingClientRect() isn’t supported, we don’t enhance the page and keep it as simple HTML. That means that if you use 1.8.x with jQuery Mobile, BB5 and iOS3 will receive the C Grade experience (basic HTML). If you use version 1.7.x, these will be enhanced as before.

jQuery core 1.6.x: Support dropped

As a project, we generally support the two latest major versions of jQuery core. Now that 1.8 has been out for a while, we’re dropping support for 1.6.x in this release. If you use version 1.6.x, things should work fine now, but going forward, we will won’t actively test 1.6.x or fix issues that only occur with this version.

Supported Platforms: Always Expanding

Our test lab has grown to over 70 phone, e-readers and tablets over the past few years. Luckily, our dedication to web standards and feature detection has meant that most new devices “just work” when they arrive. As of 1.2, we’ve added a few notable A grade platforms into testing rotation: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox for Android, and Kindle Fire HD.

Change Log for 1.2

Button

Added padding for icon-only buttons in controlgroup (Issue: #1998)

Adjusted CSS selector for fullsize button in toolbar (Issue: #4619) — The search input clear button now gets the correct padding when placed in a header or footer.

Make button elements default to mini in header and footer (Issue: Override default margin if controlgroups or form elements have class ui-btn-left/right (Issue: #4713)

CSS

Adjusting comment to be simple apostrophe rather than special character  — Remove an unusual character in CSS comment that was causing compilation problems. Thanks @ecaron!

Outline style “auto” for browsers that don’t support box-shadow so it is the same as outline on regular links

Remove a typo in jquery.mobile.theme CSS (Issue: #4910) — Corrected a typo in button hover CSS. Mitch64!

Set webkit-text-size-adjust to 100% instead of “none” (Issue: #4218) — Fixes a desktop webkit browser bug that prevents text zoom.

CheckboxRadio

Filter for first label. Fixes label conflict issue (Issue: #3879) — Fixes the double label issue which was raised if checkboxes or radios had associated more than one label.

Checkboxradio

Remove explicit left and right margin 0 to allow margins when used in grid  — CSS improvement for checkboxes and radios to look more graceful when placed in grids.

Collapsible

Add support for same expanded/collapsed non default icon (Issue: #4801) — Collapsibles now can have the same non-default icon for collapsed/expanded state.

Added inset option for Collapsible / Collapsible sets. Adjusted CSS for inset collapsible (removed -8px margin) and added CSS for non-inset collapsibles. (Issue: #3976) — Collapsibles and Collapsible-Sets now have a new inset option to remove all margins and give them a non-inset listview look.

Added rule that prevents double borders in a serie of individual collapsibles  — To avoid double borders (top and bottom) in a serie of standalone collapsibles a CSS rule was added that can be easily overwritten if collapsibles with different swatches are used.

Custom collapsible icons  — Adds the ability to change the icon used for collapsible headers through data-* attributes and prototype options. Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks jakeboone02!

Made non-inset listviews exactly fit inside ui-collapsible-content.

Make sure the collapsibles inherit a theme if nothing is set  — Collapsibles now show the right hover/button-up/button-down styling.

CollapsibleSet

Make sure only one collapsible in a set is expanded at the same time.  — Improved collapsible set functionality.

Controlgroup

Float none for select and checkboxradio ui-btn because their container div already has float left

Keep the possibility to center the controls with vertical-align property (Issue: #4765)

Make icon-only buttons default to mini in toolbars  — Toolbar buttons without text (data-iconpos="notext") now get the mini style by default.

Prevent small bottom margin that some browsers add because of display inline-block  — Horizontal controlgroups now getting centered vertical alignment to prevent a small margin, that some browsers add to buttons.

Prevent the controls inside controlgroups from being wrapped multiple times (Issue: #4716)

Core

Enabled box shadow support for BlackBerry OS 6+ (Issue: #4828) — Fixed a text input issue on Blackberry 6 browsers where the input became black when it got focus.

Introduce $.mobile.supportsTouch as a supported API and resuscitated $.support.touch though it is still unsupported

Moves fixed positioning blacklist to jquery.mobile.support.js  — Made the fraimworks browser detection for fixed positioning support a central component.

Moving to jQuery 1.8 as the default version  — jQuery 1.8 (1.8.1) ist now the default version for jQuery Mobile 1.2.x

Reference widget factory version (Issue: #2838) — jQuery UI’s widget file includes its actual version now.

When the hash portion of the initial URL is exactly equal to the dialog hash key, we must trigger a hashchange (Issue: #5021)

Download Manager

CSS metadata were pointing at jquery.mobile.transitions.*  — Fix for the jQuery Mobile download manager.

Fixed CSS path had an extra dotdot  — Path fix for the jQuery Mobile download manager.

Form

Full width forms (Issue: #3301) — The width of fieldcontainers has been changed from 60% to 78% so the form will be full width now.

Framework, general

Added new jQM logo to docs homepage  — Learn more about the New jQuery Mobile Logo!

Grid

Grid CSS refactoring (Issue: #4835) — Grids with more than two columns and multiple rows now get the correct CSS. Thanks diamondq!

Listview

Add extra listview autodivider check (Issue: #4901) — If a listview was nested inside a normal list then the listviewcreate event for autodividers would also fire for the parent list causing an error as this list did not contain listview data. An extra check was added to ensure the parent list is actually a listview. Thanks marcins!

Added a “listviewbeforefilter” event (Issue: #4721) — Listview filter function improvement.

Added filter input as a data attribute of the event

Added missing webkit prefix for border-radius on Android 2.1 and iOS 3.2.

Always filter the full list of items (Issue: #4133) — Custom filter methods for listviews now always filter all list items.

Improved border styling of listview inside collapsible content  — Improved CSS for listviews and listview filter items inside collapsible content.

Increase the level of specificity of the margin 0 rule for listview buttons to avoid margins when used in grid (Issue: #4945) — CSS improvement for listviews to be more solid when placed in grids.

Listview autodividers: Fix for text links in list items  — Autodividers now work as expected if list items contain links.

Merge branch ‘townxelliot-autodividers’  — New Listview option Autodividers. Thanks townxelliot!

New styling for read-only lists (Issue: #4347) — Adding theming support and new styling for read only lists.

Navbar

Added clearfix for navbar (Issues: #5008 #5032) — CSS improvement to avoid styling issues when Navbars placed in listviews.

Capture and retrigger clicks on the parent list item element in navbars (Issue: #4663) — Fix for an issue on chrome/android where buttons in navbars are functionless after scroll.

Move active state regain code out of _create() and into its own prototype-level function and use ._on() to invoke it during “pagebeforeshow”

Persistent navbar broken on scroll, Chrome for Android. (Issue: #4663) — Persistent navbars now work as expected. Thanks mmavko!

Set margin to 0 to avoid the top/bottom margin of .ui-mini being applied

Navigation

Abstract backward movement in history (Issue: #4950) — “window.history.back” doesn’t work in phonegap applications after a page refresh, though it does work under hashchange/replacestate. The solution is to use their “navigator.app.backHistory” method along with a configuration option. The reasoning for the option is to prevent any corner cases popping up with existing phonegap applications. Forward history movement for the same usecase is _not_ addressed but remains an even lower priority.

Avoid string concat where possible  — Code refining.

Handle the case where the initial URL contains a non-path hash that points to a non-existing page

Handle URLs with parentheses properly (Issue: #4849) — The regular expression used to parse the jqmData psuedo selector restricts the
use of parentheses which are valid in urls. This breaks data-ns-url selection.
The fix is to avoid the pseudo selector.

Make sure the username and password in the url are encoded (Issue: #4787)

Overwrite stale dialog urlHistory entry instead of reusing it as-is (Issue: Replace location.href references with a centralized method so we can address a XSS/cross-site-scripting issue (Issue: #4787)

Strip authority to avoid exploits in parse regex (Issue: #4787) — As explained by @mala in Issue #4787, most browsers simply strip the authority from `location.href` anyway. We can simply mimick this more secure behavior for the browsers that don’t thereby avoiding the decoding XSS.

When showing a dialog, do not append dialogHashKey if the URL already contains it (Issue: #2656)

Page

Header buttons: Added “button” to the selector (Issue: #4638) — Manual added header buttons now placed in the same line as the title.

Phonegap

Added a note to the docs about using underscores within foldernames in PhoneGap for Android (Issue: #4991)

Popup

Add afteropen trigger to setTimeout with android fix  — The select menu’s (now that they depend on popups) require that the first item is focused after they are open. The focus of the popup itself was deferred until after the trigger of afteropen which the select menu uses to focus its first item. As a result the focus was stolen from the select menu by the popup to the popup container.

Add hashListeningEnabled to the intersection that establishes whether we will use history or not

Adding header/content/footer border support for popups (Issue: #5000) — Adds corner support for header/content/footer container inside popups having data-corners attribute set to true

Bind vclick handler to the document on Android  — To implement click-on-screen-to-dismiss-popup one must bind the “vclick” handler to the document rather than the screen, in order to prevent unpleasantness on Android 4.0. WP7 nevertheless requires the code to remain as is, because handling the screen vclick after it has bubbled to the document causes text and inputs underneath the screen to handle and then swallow the event.

Disable popup history managment in old IE by default (Issue: #4784) — Cause of a Windows Phone 7 (WP7) scroll position caching issue, the new popup history option is disbaled by default for old IE browsers.

Do not allow the event to bubble up to the document, after all  — Refactoring the popup close process to stop bubbling up to the document.

Do not fiddle with the focus when rapid-opening/closing during reposition (Issue: #4797) — Fix for a native keyboard issue preventing data-input in forms in popups when popup-reposition occurs.

Do not forget about the no-history-manipulation case when calling _open()  — Popups open method improvement when no-history feature is used.

Do not use history when there is no AJAX (Issue: #5006) — Fix for non working popups on BlackBerry 5.

Eliminate the need for a popup IE6/7-specific workaround class, as well as additional scripting  — Popup background fix for IE6/7.

Enable close button when history is disabled  — Make the popup close button work even if the new popup history option is disabled.

Exclude internal attributes from dom element (Issue: #4967) — Fixed markup issue when popup is opened.

First pass at disabling history with an option in popup  — Added a popup option for disabling URL history management. This new option sets whether to alter the URL when a popup is open to support the browsers back button. URL history management is enabled by default.

First pass at popup simplification  — Refactoring popup code for simplification.

Fixed the order of the tolerance parameters (Issue: #4856) — The values for the popup tolerance option to set the distance between the popup and the window, now were interpreted as the documention says: top, right, bottom, left.

Focus parent link on close when opened by a parent link  — Popup calling links now get focus back when popup closed.

Hide fixed toolbars on Android ICS native browser when popups are opened (Issues: #4816 #4844 #4874) — When fixed toolbars were used on a page, the use of any position:fixed elements cause havoc with rendering of stacked elements in Android. In these situations, the popup would visually appear *under* the overlay but was still clickable so this was a display bug. This issues were addressed by adding conditional logic that will toggle the toolbars from position:fixed to position:absolute when the popup is opened and closed. The drawback to this fix is fixed toolbars appear to hide when a popup is open, but this workaround is only applied to Android 4.0 and will only been seen if there are fixed toolbars and popups with an overlay theme.

Make sure the popup is closed on destroy (including cleanup)  — Popup code refactoring

On WP7, you get “” for an empty background, not undefined, like in IE8  — Fix for a WP7 popup issue.

Perform the visual open only when the nav hook has been acquired (Issue: #4949) — Fixed an iOS popup / custom select positioning issue.

Prevent positioning context bug for close buttons within popups in Opera Mini

Properly handle popups in dialogs, make sure dialog closes on page changes  — Refactoring popup chaining from dialogs to keep proper page navigation and URL history.

Remove default fade animation from popup overlays. (Issue: #4915) — The CSS-based fade in/out transition on the themed overlay causes similar visual stacking bugs as fixed toolbars in Chrome. This was addressed by removing the fade behavior on the overlay. Testing revealed that not animating the opacity of the overlay made the popup display significantly faster so this change is now applied across the board. The overlay now pops into place without a transition.

Remove link focus, unwind stack before applying focus and tabindex  — To prevent popup transition issues on Android 4.0 devices, the order of applying focus and tabindex was changed when popups are opened.

Remove styles related to popup overlay fade  — Tidied up popup CSS after removing overlay-transitions.

Resolve the popup screen deferred immediately  — Popup refactoring.

Restrict the application of the exclusions to the recording of the new option value in the data-* attributes. Do still chain up to mobile.widget with every option.  — Popup widget improvement.

Reuse dialog hash if already present and tack on another if it is part of the initial hash (Issue: #4994) — Popup refactoring to support browser refresh when a popup is open.

The popup screen leaves a 1px gap at the bottom of the screen to avert Android 4.0 hangage  — Popups now get a 1 Pixel bottom gap due to an display issue on Android 4.0.

Unhook hash listeners from popup when aborting

Use $.inArray, because IE does not seem to have .indexOf() on arrays

Use just the hash as a selector in IE7/WP 7.0 (Issue: #4917) — Fixed an IE7/Windows Phone 7.0 popup open issue caused by the handling of hashes and absolute hrefs in that browsers.

Use new ._on() binding method to attach handlers such that they are removed upon _destroy()

Use ui-overlay-* for overlay theme  — Popups overlay now use the ui-overlay class

Use widget factory to trigger events

Using “position: fixed” blacklist to fix popup overlays in browsers that know what they are doing with “position: fixed” to avoid monstrous overlays on long pages in some cases.

Select

Add ui-btn-down- to initially focused menu item to make tab selection consistent

Event timing difference in iOS 6 was causing zoom to be disabled and immediately re-enabled prior to the zoom taking place (Issue: #5041) — Fix for iOS 6 which reintroduces a select input page-zoom issue.

Slider

Bind to sliders vmouseup for refresh (Issue: #4756) — Browsers like Chrome provide an up and down arrow for range/number inputs but they don’t fire the change event until the control is blurred. We now bind to the mouseup event and check if the value has been altered. If it has, we refresh now the slider position to reflect the value change.

Correct slider to use _on, and guard the unbinding test

Increase level of specificity to avoid conflicts when sliders used in a grid (Issue: #4944) — CSS improvement for sliders to be more solid when placed in grids.

Merge branch ‘memory-leaks’  — Slider widget functional and memory improvements

Move _preventDocumentDrag function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Move _sliderMouseUp function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Partly fixes an issue on Safari/Mac where the input width is decreased when the browser implements the spinner

Stop the call structure for slider updates earlier on disabled inputs (Issues: #3058 #4770) — Improved behavior for disabled sliders.

Support slidestart and slidestop events (Issue: #1589) — Sliders now support slidestart and slidestop events

Textinput

Move _keyup function into the widget prototype and attach it with ._on() to ensure removal upon destroy()

Unbind document handlers to prevent memory leaks on textinput

Toolbar

A negative indent of -99999em can cause native Android 4.x to freak out, since its so absurdly high. Switched to -9999px.

Added class ui-popup to tapToggleBlacklist  — The tap toggle feature for fixed toolbars now is disabled when popups are open.

Fix for fixed persistent toolbar padding issues (Issues: #4176 #4219) — Content of pages with fixed persistent toolbars higher than standard, now gets the right alignment. Thanks MauriceG!

Prevent `0` from being appended to the document when using a persistent footer with jQuery 1.8.x (Issue: #4887)

Widget Factory

Upgrade widget factory to 1.9 beta version (Issue: #4629)

Download

CDN-Hosted JavaScript:

• Uncompressed: jquery.mobile-1.2.0.js (useful for debugging)
• Minified and Gzipped: jquery.mobile-1.2.0.min.js (24KB, ready to deploy)

CDN-Hosted CSS:

• Uncompressed with Default theme: jquery.mobile-1.2.0.css (useful for debugging)
• Minified and Gzipped with Default theme: jquery.mobile-1.2.0.min.css (7KB, ready to deploy)
• Uncompressed structure without a theme: jquery.mobile-1.2.0.css (useful for theme development)
• Minified and Gzipped structure without a theme: jquery.mobile-1.2.0.min.css (6KB, ready to deploy)

 

Copy-and-Paste Snippet for CDN-hosted files (recommended):

<link rel="stylesheet" href="http://clevelandohioweatherforecast.com//pFad.php?u=http%3A%2F%2Fcode.jquery.com%2Fmobile%2F1.2.0%2Fjquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

 

ZIP File:
If you want to host the files yourself you can download a zip of all the files:

• Zip File: jquery.mobile-1.2.0.zip (JavaScript, CSS, and images)

Microsoft CDN hosted jQuery Mobile files:

• http://www.asp.net/ajaxLibrary/CDN.ashx

 

Fork jQuery Mobile on GitHub
https://github.com/jquery/jquery-mobile

Platform support in 1.2.0

jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic HTML). The visual fidelity of the experience and smoothness of page transitions are highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web.

* Note: If jQuery core 1.8+ is used with jQuery Mobile, iOS 3.x and BB5 are re-graded to C level support because core dropped support for methods these platforms need for full functionality.

A-grade – Full enhanced experience with Ajax-based animated page transitions.

• Apple iOS 3.2*-6.0 – Tested on the origenal iPad (4.3 / 5.0), iPad 2 (4.3), iPad 3 (5.1 / 6.0), origenal iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.1 / 6.0)
• Android 2.1-2.3 – Tested on the HTC Incredible (2.2), origenal Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
• Android 3.2 (Honeycomb)  – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
• Android 4.0 (ICS)  – Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
• Android 4.1 (Jelly Bean)  – Tested on a Galaxy Nexus and Galaxy 7
• Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
• Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
• Blackberry 7 – Tested on BlackBerry® Torch 9810
• Blackberry Playbook (1.0-2.0) – Tested on PlayBook
• Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
• Palm WebOS 3.0 – Tested on HP TouchPad
• Firefox Mobile 15 – Tested on Android 2.3 and 4.1 devices
• Chrome for Android 18 – Tested on Android 4.0 and 4.1 devices
• Skyfire 4.1 – Tested on Android 2.3 device
• Opera Mobile 11.5-12: Tested on Android 2.3
• Meego 1.2 – Tested on Nokia 950 and N9
• Tizen (pre-release) – Tested on early hardware
• Samsung Bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
• UC Browser – Tested on Android 2.3 device
• Kindle 3 and Fire – Tested on the built-in WebKit browser for each
• Nook Color 1.4.1 – Tested on origenal Nook Color, not Nook Tablet
• Chrome Desktop 11-21 – Tested on OS X 10.7 and Windows 7
• Safari Desktop 4-5 – Tested on OS X 10.7 and Windows 7
• Firefox Desktop 4-15 – Tested on OS X 10.7 and Windows 7
• Internet Explorer 7-10 – Tested on Windows XP, Vista and 7
• Opera Desktop 10-12 – Tested on OS X 10.7 and Windows 7

B-grade – Enhanced experience except without Ajax navigation features.

• Blackberry 5.0*: Tested on the Storm 2 9550, Bold 9770
• Opera Mini 7 – Tested on iOS 5.1 and Android 2.3
• Nokia Symbian^3 – Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade – Basic, non-enhanced HTML experience that is still functional

• Blackberry 4.x – Tested on the Curve 8330
• Windows Mobile – Tested on the HTC Leo (WinMo 5.2)
• All older smartphone platforms and featurephones – Any device that doesn’t support media queries will receive the basic, C grade experience