CSS media query to target only iOS devices

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

User · Answer

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

User · Answer

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

User · Answer

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  quot Safari on iOS quot

User · Answer

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

[css] CSS media query to target only iOS devices

Examples related to css

Examples related to media-queries