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. I learned this CSS trick from coding Themify themes and Flow; and the device breakpoints are referenced from this site.


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

23 Comments

Sarang
Jul 29, 2015 at 8:54 am

Thanks! This one is a nice and handy fix. Obviously, it will work on all iOS devices because it is CSS based… But if anyone relies more on JavaScript for this, will it pose any unseen disadvantages?

Evonence
Jul 31, 2015 at 12:12 am

Thanx for sharing such a content. Bug is really a big problem. The most important part in it is any programmer can use this code.

Theo
Aug 5, 2015 at 3:35 am

Great fix, thanks a ton for sharing!

JiDai
Aug 18, 2015 at 4:21 am

On a iphone 5 on portrait mode I pass in this MQ :

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

then override by :

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

Gary Smith
Aug 5, 2015 at 6:47 am

All the points are explained very clearly, Great source of information. Thanks for en-lighting us with your knowledge, it is helpful for many of us.

Graphicorn
Aug 12, 2015 at 12:03 pm

I was just looking similar to this problem..thank you

Bootstrap
Aug 13, 2015 at 4:31 am

Thanks for the Code!!

abdul kader
Aug 13, 2015 at 6:25 am

Great post … thanks for sharing with us

Distuned
Aug 13, 2015 at 11:33 pm

Will it work on other IOS’s too? Say older IOS versions?

Elaine
Aug 15, 2015 at 7:13 am

Thanks for this fix. We’ve been having issues with CSS in older Apple iPhone and iPad models e.g. iPad 2 when designing sites so we are always on the look out for articles like this.

Josh
Aug 15, 2015 at 3:08 pm

Nice information, I have learned a lots of good things from this post.
Thanks for sharing.

Aura
Aug 19, 2015 at 4:31 am

Thanks!
This one is a nice and handy fix. Obviously, it will work on all iOS devices.

Graphicorn
Aug 25, 2015 at 10:25 pm

Thanks for the fix

branding
Aug 30, 2015 at 8:40 pm

thank you very much, I’m having this problem, I’ll use it to our website

Brian Califano
Sep 4, 2015 at 7:57 am

The CSS fix for such a bug may come as a major relief for Apple owners who are still running their device on iOS 7. The new iPhone model will be optimized to iOS 9, which renders this bug invalid, since the solution will already be integrated into the operating system. However, older users often seem to be bogged down by the pace of innovation, since this bug can be persistent in older versions. The CSS fix will not only eliminate this bug for older devices, it is a simple and straightforward process that can be done by anyone by closely following the steps in the tutorial.

Hammur IT
Sep 4, 2015 at 9:23 am

Thanks for this.

Calipus
Sep 9, 2015 at 7:15 am

Great CSS fix to all device size (ios) and very easy to learn. Thanks a ton for sharing.

mitsubishi klima
Sep 21, 2015 at 6:05 am

Thanks! This one is a nice and handy fix

James W
Dec 15, 2016 at 2:59 am

Thanks for this. I’ve added iPhone 6/6s/7, iPhone 6 plus/6s plus/7 plus, and iPad Pro to mine: https://gist.github.com/uxjw/f5b833eaede49ad203bce6ed653d027e

Vail Joy
Dec 16, 2016 at 11:35 am

Awesome, thanks for sharing your gist!

Zeno Lahaye
Jan 20, 2017 at 3:34 am

I’ve had a problem with the Ipad Pro mediaquery, the fixed height was overwriting the “100vh” for smaller desktop screens. I found a method to isolate the media query for the Ipad Pro. Anyone with the same problem should take a look. https://gist.github.com/zenolahaye/aed0ac3fc3c8c5dc934c79004a6d782c

Husain
Jan 28, 2017 at 3:18 am

Good Post

willi
Feb 3, 2017 at 10:36 pm

Ive had a problem with the Ipad Pro mediaquery, the fixed height was overwriting the 100vh for smaller desktop screens. I found a method to isolate the media query for the Ipad Pro. Anyone with the same problem should take a look

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.