Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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:
* 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:
.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;

Thank you ! :D

yisibl commented Oct 30, 2014



pomm0 commented Nov 18, 2014




ghost commented Nov 20, 2014

What about other devices that have the same size(s)? Won't this catch more than just the stated devices?

Thank you so much for this!


enyo commented Jan 8, 2015

@yishmeray it doesn't matter if it catches other devices, because the dimensions are still valid.

sayber commented Feb 5, 2015

thx man!

Awesome thanks!


Thank you for this! Any chance you know how to handle this for an iPad mini?

tobek commented Feb 25, 2015

iPad mini is also 1024x768 resolution so this solution should work just fine for that too.

mems commented Feb 26, 2015

This not works if you are in an iframe

@pburtchaell Can you at least explain the "buggy behavior" that you are referring to?
This solution is just for one use case. What about 30vh/70vh or 50vw/50vw?
I was referred here from and thought this was a solution for all "buggy behavior".

Thank you very much!

seavor commented Mar 29, 2015

Great solution, +1!

Additionally, I needed this so badly for a project that I went ahead and created a SASS mixin for it. I've gisted it in hopes that people will draw on and help improve it, as it's extremely rudimentary and bloatish as of its first draft.

nhoizey commented Jun 3, 2015

What kind of issues? What about other OS/browsers?

I've seen this, which I seem to be the only one considering an issue:

jopfre commented Jun 12, 2015

here's my version in sass which covers my needs. includes all iOS7 devices in both orientations. not a mixin just a copy paste to avoid seavor's code bloat problems.

Is this a complete solution for all iOS devices, or is it just partial covering some of them?


pburtchaell commented Jun 27, 2015

@cooldept This just covers some of the iOS devices. You can get the dimensions for other media queries from

JMarqz commented Jul 16, 2015


Great Idea, thx!
But couldn't this be simplified and bulletproofed a lot to just:

@media (height: 1024px) {
.foo { height: 1024px; }
It doesn't matter if other browsers interpret this as well - the outcome should be identical to 100vh (thats the whole point of this fix). Same for other heights/widths and fractions of those.

hay commented Aug 18, 2015

Note that iOS 8 fixes this problem and you no longer need to use these classes if you're targeting those devices only.

An alternative would be to use useragent sniffing (unfortunately i don't know of another way) and only include these classes if you're on an iOS < 8 device:

// In your Javascript

function isBadIos() {
    var regex = /(iPhone|iPad|iPod);[^OS]*OS (\d)/;
    var matches = navigator.userAgent.match(regex);

    if (!matches) return false;
    return matches[2] < 8;

if (isBadIos) {
    document.querySelector('html').className = 'no-vh-support';

// In your CSS .element-with-full-height {
    // Whatever you want to include here

@hay this is a pretty decent way to inject this work-around.

@Gang-Rel so true...

Kzai commented Sep 25, 2015

Sweet! :)

wesruv commented Dec 30, 2015

Simpler mixin, made for use with pre-maps Sass (because of the project I'm on):

CarlaAG commented Feb 3, 2016

Thanks a lot :)

Here's a LESS mixin to support vh and vw units on all iOS Safari versions at

Thank you!!


hjb23 commented Aug 5, 2016

Merci beaucoup

zocozo commented May 14, 2017


heyrm commented Jul 4, 2017

Thanks bro

what happens when the keyboard is active?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment