Skip to content

Instantly share code, notes, and snippets.

@uxjw
Created Dec 15, 2016
Embed
What would you like to do?
iOS doesn't swap vh and vw like you would expect in landscape view, so we have to set these manually
/* fix iOS bug not displaying 100vh correctly */
/* iPad Pro */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : landscape) {
.fullheight {
height: 1024px;
}
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait) {
.fullheight {
height: 1366px;
}
}
/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.fullheight {
height: 768px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.fullheight {
height: 1024px;
}
}
/* iPhone 6/7 plus */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 414px;
}
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 736px;
}
}
/* iPhone 6/7 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 375px;
}
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 667px;
}
}
/* iPhone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 568px;
}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.fullheight {
height: 480px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment