How can you hide CSS from the iPhone, but not other browsers?

Question

I know how to hide CSS from all browsers except the iPhone: see How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

But: how do I hide CSS from the iPhone, but not other browsers?

Answer 1

I actually ended up going with a slightly different, and very ridiculous, solution that uses media queries and getComputedStyle to redirect to a mobile site if we’re on an iPhone-like device.

<style media="only screen and (max-device-width: 480px)">html{border-top-style:dashed;}</style>

<script>
if(window.location.search.indexOf("?m=t")==-1 && window.getComputedStyle) {
    var mobile = false;

    if(window.getComputedStyle(document.getElementsByTagName("html")[0],null).getPropertyValue("border-top-style")=="dashed") {
        var mobile = true;
    }

    if(mobile) {
        window.location.replace(window.location+"?m=t");
    }
}
</script>

I’m sure I got the getComputedStyle idea on Stack Overflow, but I can’t remember where.

Answer 2

You could possibly use @media queries:

<link rel="stylesheet" href="noniPhoneStylesheet1.css" media="only screen and (min-device-width:490px)" />

Which would automatically exclude iPhone browsers from downloading that particular stylesheet (the iPhone's screen width being 480px); so putting any styles you want to hide from the iPhone into that stylesheet should work. Although, obviously, it'll also block that stylesheet from other devices that respect media-queries and have a screen width below 490px.

Answer 3

You can still do the conditional check, for iPhones append the iPhone CSS otherwise your normal CSS.

var agent=navigator.userAgent.toLowerCase();
var isIPhone = ((agent.indexOf('iphone')!=-1);

if (isIPhone)
  document.createElement("style")... //iPhone CSS
else
  document.createElement("style")... //normal CSS

Answer 4

Or a simple redirect to a page without the CSS, or use PHP to detect iPhones and deliver them a page without the style — something with a flow of:

if iPhone {
    echo //page without CSS
else {
    echo //page with CSS
}