CSS media query to target only iOS devices [duplicate]

Question

Is there a @media query to target only devices running iOS?

For example:

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

Would this also alter the behavior of the page on Android devices with these device widths?

Phytopathology

all devices not only IOS – Woebegone

Why you need this? You can get the user agent with javascript and depending on the result you can include a special css file. – Tavey

#3840309 – Interoceptor

@Tavey - as a general rule (see: Rule of Least Power) if anything can be achieved via HTML or CSS instead of JS, then it should be implemented via the former technology. It's not true that we should never turn to JS for presentational effects, but if CSS can deliver the result that we need, then JS is superfluous. – Singley

Answer 1

Yes, you can.

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

YMMV.

It works because only Safari Mobile implements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

Please note that @supports does not work in IE. IE will skip both of the above @support blocks above. To find out more see https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/. It is recommended to not use @supports not because of this.

What about Chrome or Firefox on iOS? The reality is these are just skins over the WebKit rendering engine. Hence the above works everywhere on iOS as long as iOS policy does not change. See 2.5.6 in App Store Review Guidelines.

Warning: iOS may remove support for this in any new iOS release in the coming years. You SHOULD try a bit harder to not need the above CSS. An earlier version of this answer used -webkit-overflow-scrolling but a new iOS version removed it. As a commenter pointed out, there are other options to choose from: Go to Supported CSS Properties and search for "Safari on iOS".

Tambourin

-webkit-overflow-scrolling only supported in Safari, see developer.mozilla.org/en-US/docs/Web/CSS/… – Tambourin

And this ignores Android? – Motherwort

This is awesome... Thanks for this, I know it's not a standard approach but sometimes you do need special rules for iOS because... well because they are apple. – Nuncle

@carl Yes this ignores Android simply because -webkit-overflow-scrolling is only supported by Safari Mobile. – Tambourin

try it with android 5.0 and iphone 5, and its fine, thanks – Shadwell

I tried this in an iOS 8.1 simulator and it does not work. I could be misinterpreting but I believe that @supports only works in iOS 10 or greater. caniuse.com/#feat=css-featurequeries – Brewer

Yes, I suppose you are right. iOS 8 is really old. @supports is a relatively new syntax. – Tambourin

I don't understand why this was accepted as an answer: If you use Chrome on iOS, this code doesn't work. developer.mozilla.org/en-US/docs/Web/CSS/… – Tedie

@Tedie All browsers on iOS are based on Safari's Webkit engine: blog.chromium.org/2016/01/… Chrome for iOS is basically Safari with stuff added on top. – Tambourin

Sorry, messed up link & can't edit. See blog.chromium.org/2016/01/… and arstechnica.com/gadgets/2016/01/… – Tambourin

tested in on chrome and safari on iPhone, at the moment both work – Lishalishe

This doesn't appear to work with iOS 13 (on iPad) anymore since they dropped support for -webkit-overflow-scrolling. Has anyone come up with a new solution for iOS 13? – Cabrera

That's news. Hmm... – Tambourin

@JoshLyon -webkit-touch-callout still works. See https://mcmap.net/q/48065/-css-media-query-to-target-only-ios-devices-duplicate. – Cumulus

Hopefully they fix the horrible select styling before they remove this... – Glidebomb

If this ever changes again, go to developer.apple.com/library/archive/documentation/… and search for "Safari on iOS only" – Extensor

The above label at the top of this is incorrect, "This question already has answers here: Detect iPhone/iPad purely by css (5 answers) Closed last year." THIS answer can be used inside the other answer to further delineate for iOS. Perfect! Thanks! – Enact

-webkit-text-size-adjust currently detects ios safari also – Maiamaiah

Answer 2

I don't know about targeting iOS as a whole, but to target iOS Safari specifically:

@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
   /* CSS for other than iOS devices */ 
}

Apparently as of iOS 13 -webkit-overflow-scrolling no longer responds to @supports, but -webkit-touch-callout still does. Of course that could change in the future...

Cumulus

Answer 3

As mentioned above, the short answer is no. But I'm in need of something similar in the app I'm working on now, yet the areas where the CSS needs to be different are limited to very specific areas of a page.

If you're like me and don't need to serve up an entirely different stylesheet, another option would be to detect a device running iOS in the way described in this question's selected answer: Detect if device is iOS

Once you've detected the iOS device you could add a class to the area you're targeting using Javascript (eg. the document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");, jQuery, PHP or whatever, and style that class accordingly using the pre-existing stylesheet.

.iOS-device {
      style-you-want-to-set: yada;
}

Cardenas

This is what I used. Our code knows that we are on iPhone so in JS we change the font-size for text-area to 16px, which looks good and does not affect other browsers (desktop including) – Whizbang

Answer 4

Short answer No. CSS is not specific to brands.

Below are the articles to implement for iOS using media only.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://stephen.io/mediaqueries/

Infact you can use PHP, Javascript to detect the iOS browser and according to that you can call CSS file. For instance

http://www.kevinleary.net/php-detect-ios-mobile-users/

Interoceptor