如何定位具有jQuery移动功能的手机？

Question

I've made a web-app using the jQuery Mobile framework for which I would like to provide a fall-back, for lower-spec phones.

My question is... what is the best way to target JQM-capablephones? I saw a similar question posted on the jquery forum. One of the answers suggested http://detectmobilebrowser.com/ which provides a long list of handsets.

Is this the best way, or should I be testing for browser-capabilities rather than actually targeting handsets. If it is the latter what feaures are considered to be 'Grade-A' featues?

Cheers

Answer 1

Progressive enhancement is what you should aim for, jQuery allows you to have a single codebase and have it work across the range of devices.

Consider this:

• All links to other pages are regular html links, links will still work without AJAX support because they'd just send you to the location of the required page

• All major framework elements are built around lists, links, and a few divs. No HTML5 required for rendering content

• At the bare minimum, all phones can display a good amount of styling, allowing you to display the content no matter how capable

Do you have custom interfaces which wouldn't work at all without full support for jQuery mobile?

Answer 2

I agree that graceful degradation is the best solution. I would add that using the noscript tags is also a good way to provide graceful degradation by adding adding functionality via HTML for phones that have no support for JS.

I think it will be difficult to find a browser-capability (or even a set) that defines whether the phone will work with JQM. In my own experience I have used WURFL, an open source device detection library, that provides capability information. However I used it to target specific devices to include device specific CSS and remove all JS for other devices that I know do not support it (to remove the overhead of the JS being downloaded).

WURFL: http://wurfl.sourceforge.net/

JQM advertises that it provides graceful degradation:

Graceful Degradation: jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers. However we don't consider this to be an all-or-nothing proposition: Less capable browsers will still receive the best possible experience that their platform can handle. They may not have all the gradients or fancy transitions of the best platforms but they'll still be highly usable. The most basic browsers will easily degrade back to simplified HTML and CSS.

Answer 3

I have also tested multiple JQM pages in a single mobile page which work great (very speedy) in JQM but suffer from the same problem mentioned (all pages show up when javascript is turned off in the browser of a smart phone). To work around this issue, only use a single page per JQM page (you give up speed and uniform page transitioning though). In regards to the NOSCRIPT tag option, that tag is NOT universally recognized in all browsers. To work around that issue, you could try something like the following:

<div id="no-js">
<!-- Place HTML without javascript here -->
</div>
<div id="js">
<script language="javascript">
// place javascript here which would be ignored by browsers not support javascript or with
// javascript turned off
document.getElementById("no-js").style.display = "none"; // be sure to hide the non javascript
// div
</script>
</div>

The above logic would work in either NOSCRIPT tag type browsers as well as those that do not recognize NOSCRIPT.

dlausch