3

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?

Community
  • 1
  • 1
Paul D. Waite
  • 89,393
  • 53
  • 186
  • 261
  • Meanwhile, an even better answer is found here: https://stackoverflow.com/a/47818418/214500 – mtness Aug 30 '18 at 09:14

4 Answers4

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.

Paul D. Waite
  • 89,393
  • 53
  • 186
  • 261
David says reinstate Monica
  • 230,743
  • 47
  • 350
  • 385
  • And...here's hoping it really works... =0 (I've not tried it, just seems like it *should*...) – David says reinstate Monica Dec 05 '10 at 23:19
  • @Paul, any luck with this, or feedback? – David says reinstate Monica Dec 06 '10 at 22:57
  • @David: righty — unfortunately, this also hides it from Firefox 3.0 and IE 9 (and presumably lower), so at the moment, it’s not a goer for sites with a mainstream audience. Opera 9.0 and Safari 3.0 are fine though, so once Firefox 3.0 has died out enough, this method plus conditional comments for IE could work a treat. – Paul D. Waite Dec 09 '10 at 17:36
  • @Paul: hmm. That's an oddly contrarian implementation from Firefox =/ Were you able to find an alternative method? – David says reinstate Monica Dec 09 '10 at 18:04
  • @David: I think it’s correct — I believe the spec says that if a browser doesn’t understand part of a media query, it should disregard the stylesheet. – Paul D. Waite Dec 09 '10 at 18:52
  • @Paul, my comment was to Firefox not having already implemented `@media queries` it surprises me that they're not as near the bleeding edge of CSS implementation as I (unfairly) expect of them. – David says reinstate Monica Dec 09 '10 at 20:02
  • @David: sure — that particular media query works fine as of Firefox 3.5, released on 30th June 2009 (just over a year after Firefox 3.0), so they caught up eventually. – Paul D. Waite Dec 09 '10 at 22:06
1

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
alex
  • 438,662
  • 188
  • 837
  • 957
Steve
  • 1,191
  • 7
  • 14
0

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
}
Paul D. Waite
  • 89,393
  • 53
  • 186
  • 261
Sum
  • 4,259
  • 1
  • 19
  • 38
0

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.

Paul D. Waite
  • 89,393
  • 53
  • 186
  • 261