iOS specific CSS
To target iOS specific devices:
@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ }
It works because only Safari Mobile implements -webkit-overflow-scrolling
: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
I used this because a WordPress Genesis responsive menu had some icon alignment discrepancies on iPhone only.
Here is the example in a media Query:
/*** IOS mobile icon adjustments ***/ @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ .genesis-nav-menu.responsive-menu .menu-item-has-children li { position: relative; } .genesis-nav-menu.responsive-menu .menu-item-has-children > a { margin-right: 0; } .genesis-nav-menu.responsive-menu > .menu-item-has-children:before { content: "\f347"; position:absolute; left:80%; float: none; font: normal 16px/1 'dashicons'; height: 16px; padding: 15px 20px; right: 0; text-align: right; z-index: 9999; color:#fff; } .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before { content: "\f343"; } .genesis-nav-menu.responsive-menu li a { font-size:30px; font-size:3.0rem; } }