CSS media query to target only iOS devices [duplicate]

by

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

More Related Contents:

  1. What is the exact screen width and height of a phone? [duplicate]
  2. Can media queries resize based on a div element instead of the screen?
  3. What is the difference between max-device-width and max-width for mobile web?
  4. What is the difference between “screen” and “only screen” in media queries?
  5. Twitter Bootstrap 3: how to use media queries?
  6. CSS @media print issues with background-color;
  7. CSS media queries: max-width OR max-height
  8. Common breakpoints for media queries on a responsive site
  9. Nesting @media rules in CSS
  10. Should I use max-device-width or max-width?
  11. What are the rules for CSS media query overlap?
  12. CSS native variables not working in media queries
  13. @Media min-width & max-width
  14. CSS specificity, Media Queries and min-width
  15. CSS media queries – Order matters?
  16. Responsive css styles on mobile devices ONLY
  17. Media query not working in IE9
  18. Which are the most important media queries to use in creating mobile responsive design?
  19. CSS media queries min-width and min-device-width conflicting?
  20. calc() not working within media queries
  21. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  22. How to detect if the OS is in dark mode in browsers?
  23. How to make responsive table [closed]
  24. How to code CSS media queries targeting ALL mobile devices and tablets?
  25. How to control number of items per row using media queries in Flexbox?
  26. How do I combine two media queries?
  27. Media Query grouping instead of multiple scattered media queries that match
  28. Single vs multiple stylesheets in responsive web design
  29. @import styles not working in a media query
  30. @media query not working in mobile. Works fine in Chrome

Leave a Comment