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;
}
}