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

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!!!