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

Question

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

But: how to hide CSS from iPhone, but not with other browsers?

Answer 1

In fact, I ended up with a slightly different and very funny solution that uses media queries getComputedStyleto redirect to a mobile site if they were 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 idea getComputedStyleon Stack Overflow, but I can't remember where.

Answer 2

@media queries:

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

iPhone ( iPhone 480 ); , iPhone, . , , , - 490 .

Answer 3

, iPhones iPhone CSS, 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

CSS PHP iPhone - - :

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