There are many Javascript fixes for the viewport height units bug in iOS 7 (iPhone & iPad), this article will cover how to resolve this bug with CSS. This particular bug affects the rendering of viewport height units, for example: if you try to make a full viewport height container with height:100vh, it will display a very tall empty gap. Although this bug was fixed in iOS 8, but many old iPhone and iPad users are still using the old iOS 7. The vh-unit buggyfill is one of the popular Javascript workarounds, but if you don’t want to rely on Javascript here is a quick CSS fix using media queries.
CSS Fix
The fix is very simple. For the elements where you need to apply 100vh, just match the element height with the device height using media queries that targets the older versions of iPhone and iPad resolution.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* fix iOS bug not displaying 100vh correctly */ /* 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; } } /* 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; } } |