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

Thank you ! :D

yisibl commented Oct 30, 2014

楼主太帅了!

Thanks!

pomm0 commented Nov 18, 2014

Thanks!

nice!

@ghost

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!

Thanks!

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!

cool

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 caniuse.com 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.

https://gist.github.com/seavor/36906178b8fc045c1d81

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: http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

jopfre commented Jun 12, 2015

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?

Owner

pburtchaell commented Jun 27, 2015

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

JMarqz commented Jul 16, 2015

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.

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

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):
https://gist.github.com/wesruv/43a347037bf0afa447ae

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 https://gist.github.com/zaygraveyard/dc4ca2cb5271d6e8d641

Thank you!!

Danke!

hjb23 commented Aug 5, 2016

Merci beaucoup

zocozo commented May 14, 2017

thanks!

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