Filtering mobile browsers by failure to execute using jQuery
<p>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 <a href="http://detectmobilebrowser.com" rel="nofollow">http://detectmobilebrowser.com</a> but that appears to filter on the basis of a list of string matches. </p>

<p>Here's what I'd like to do:</p>

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

<pre><code>#hideMeFromMobiles{display:none;}
</code></pre>

<p>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)</p>

<pre><code>if browser.window.width &gt;= 480px then {
    $(#hideMeFromMobiles).addStyle(display:block;)
    }
</code></pre>

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

<p>My question is this:</p>

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

<p>And secondly, could someone confirm the correct jQuery syntax?</p>

<p>Thanks for your help,
Dug</p>
