Filtering mobile browsers by failure to execute using jQuery

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

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.

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.

Try http://www.iui-js.org/ which I think looks more cleaner to me.

If you are serious about mobile development, you should consider building separate pages for mobile.

Although #hideMeFromMobiles{display:none;} will work, all the content and images will still be downloaded by those on a mobile, not to mention the other CSS and scripts running on the page. That will increase significantly the visitor's bandwidth. Better to serve them specific mobile pages.

As for detection, I think http://detectmobilebrowser.com is one of the best methods. No need to reinvent the wheel. As mentioned in other answers, screen width can fool you.