145

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?

jkdev
  • 9,037
  • 14
  • 52
  • 75
Kevin G
  • 1,699
  • 3
  • 13
  • 26

4 Answers4

328

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".

Jonathan Lin
  • 16,934
  • 5
  • 61
  • 59
  • 1
    -webkit-overflow-scrolling only supported in Safari, see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling – Jonathan Lin Feb 02 '18 at 02:06
  • And this ignores Android? – Carl Papworth Feb 15 '18 at 08:19
  • 4
    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. – Emil Borconi Feb 16 '18 at 17:10
  • 1
    @carl Yes this ignores Android simply because -webkit-overflow-scrolling is only supported by Safari Mobile. – Jonathan Lin Feb 19 '18 at 03:15
  • try it with android 5.0 and iphone 5, and its fine, thanks – Anthony Kal Mar 05 '18 at 09:51
  • 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. https://caniuse.com/#feat=css-featurequeries – Ryan O May 21 '18 at 16:18
  • 1
    Yes, I suppose you are right. iOS 8 is really old. @supports is a relatively new syntax. – Jonathan Lin May 22 '18 at 03:18
  • I don't understand why this was accepted as an answer: If you use Chrome on iOS, this code doesn't work. https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling – Johnny Feb 05 '19 at 11:25
  • 4
    @Johnny 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. – Jonathan Lin Feb 05 '19 at 13:33
  • Sorry, messed up link & can't edit. See https://blog.chromium.org/2016/01/a-faster-more-stable-chrome-on-ios.html and https://arstechnica.com/gadgets/2016/01/new-chrome-for-ios-is-finally-as-fast-and-stable-as-safari/ – Jonathan Lin Feb 05 '19 at 15:06
  • tested in on chrome and safari on iPhone, at the moment both work – max4ever Nov 06 '19 at 15:00
  • 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? – Josh Lyon Feb 07 '20 at 23:15
  • That's news. Hmm... – Jonathan Lin Feb 08 '20 at 03:12
  • @JoshLyon `-webkit-touch-callout` still works. See https://stackoverflow.com/a/60220757/1038456. – Aparajita Feb 14 '20 at 05:56
  • Hopefully they fix the horrible `select` styling before they remove this... – Alexander Jul 28 '20 at 11:29
  • 6
    If this ever changes again, go to https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html and search for "Safari on iOS only" – Nicholas Shanks Aug 13 '20 at 13:50
  • 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! – AppDreamer Apr 11 '21 at 20:28
9

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;
}
Community
  • 1
  • 1
bhawkeswood
  • 640
  • 7
  • 11
  • 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) – Jacek Mar 06 '20 at 09:27
7

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/

Prime
  • 3,265
  • 4
  • 21
  • 43
3

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...

Aparajita
  • 348
  • 2
  • 6