Skip to content

Instantly share code, notes, and snippets.

@kevgathuku
Forked from pburtchaell/styles.css
Created October 5, 2016 17:32
Show Gist options
  • Save kevgathuku/c78610369e08327d09f5cc099e5b24d5 to your computer and use it in GitHub Desktop.
Save kevgathuku/c78610369e08327d09f5cc099e5b24d5 to your computer and use it in GitHub Desktop.
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.
/**
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
*
* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
* the height of element `.foo` —which is a full width and height cover image.
*
* iOS Resolution Quick Reference: http://www.iosres.com/
*/
.foo {
height: 100vh;
width: 100vw;
background: url(cover.jpg) center center / cover no-repeat;
}
/**
* iPad with portrait orientation.
*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.foo {
height: 1024px;
}
}
/**
* iPad with landscape orientation.
*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.foo {
height: 768px;
}
}
/**
* iPhone 5
* You can also target devices with aspect ratio.
*/
@media screen and (device-aspect-ratio: 40/71) {
.foo {
height: 500px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment