Filtering mobile browsers by failure to execute using jQuery

Question

Hi all,

Just getting some css together for a mobile web app (using the xhtml-basic/xhtml-basic11 dtd) and was trying to think of a reliable way to filter for mobile browsers. I've taken a look at http://detectmobilebrowser.com but that appears to filter on the basis of a list of string matches.

Here's what I'd like to do:

1 - In the css, set the parts of the page to hide from mobile browsers to not display

#hideMeFromMobiles{display:none;}

2 - Call a script using a reliable library that is pretty much certain to fail in mobile browsers. The script does something like this (pseudocode)

if browser.window.width >= 480px then {
    $(#hideMeFromMobiles).addStyle(display:block;)
    }

The idea is for the script to fail non-destructively on mobile browsers and run succesfully in desktop web browsers.

My question is this:

Firstly will this work? Is there some reason this is a dead-end and I should move to another solution?

And secondly, could someone confirm the correct jQuery syntax?

Thanks for your help, Dug

Answer 1

You should be able to specify a specific stylesheet just for mobiles by linking in a special css that will only be loaded by handheld devices, normal browser will ignore this :

<link href="/css/mobile.css" rel="stylesheet" type="text/css" media="handheld" />

In the normal CSS have

#hideMeFromMobiles{}

And in the mobile css have

#hideMeFromMobiles{display:none;}

If you link the mobile css after the normal css, the mobile css settings will override the normal ones.

Answer 2

First of all, mobile browsers can lie about width and scale or scroll.

Second, jQuery is a pretty fat library for many mobile devices. It doesn't run on all of them, and it flushes the cache of some of them. xui may be a better choice. The jQuery team is looking into making a more modular version of the library for mobile devices.

Third, you're going to need some quotes around that "#hideMeFromMobiles" specifier.

Fourth, some mobile browsers by default have JavaScript off (I'm looking at you Blackberry browsers). You'll need some <noscript> markup.

ppk has been testing the pitfalls of mobile browers. You should start at his mobile tests.

Finally, some mobile browsers are great, especially the new ones on smart phones that use WebKit. I'd test the site on iPhone, Android, Storm, and Pre before forcing a mobile page onto them.