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.

styles.css

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

here's my version in sass which covers my needs. https://gist.github.com/jopfre/b8ea1a7ebf39cd8efabb 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?

@cooldept This just covers some of the iOS devices. You can get the dimensions for other media queries from http://www.iosres.com/.

Thanks!

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.

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
html.no-vh-support .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...

Sweet! :)

Simpler mixin, made for use with pre-maps Sass (because of the project I'm on):
https://gist.github.com/wesruv/43a347037bf0afa447ae

Thanks a lot :)

Here's a LESS mixin to support vh and vw units on all iOS Safari versions at https://gist.github.com/zaygraveyard/dc4ca2cb5271d6e8d641

Thank you!!

Danke!

Merci beaucoup

thanks!

Thanks bro

what happens when the keyboard is active?

document.body.style.height = window.innerHeight + 'px'; worked remarkably well for me

nice!

Thanks 👍

Thanks ! But I still feel that Safari is now the 21st Century's Internet Explorer :(

Is anyone else having trouble targeting ipads currently (2019-2020)? I‘ve spent countless hours trying to fix blurry images on a particular page. I have the fix, and have successfully targeted my css to the iphone using two different methods, but can’t seem to target the ipad. I have tried targeting by width and by webkit-overflow-scrolling (which works on the iphone). I’m wondering if Apple’s change in September 2019 to have the ipad act as a desktop is affecting targeting by device width as above. Any thoughts? Thanks!!!