Create a gist now

Instantly share code, notes, and snippets.

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

Thank you ! :D

@yisibl
yisibl commented Oct 30, 2014

楼主太帅了!

@dylanaraps

Thanks!

@pomm0
pomm0 commented Nov 18, 2014

Thanks!

@galacticrobot

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?

@izakfilmalter

Thank you so much for this!

@AndreyAntipov

Thanks!

@enyo
enyo commented Jan 8, 2015

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

@sayber
sayber commented Feb 5, 2015

thx man!

@i-heart-php

Awesome thanks!

@azizultex

cool

@alexclarkofficial

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

@tobek
tobek commented Feb 25, 2015

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

@mems
mems commented Feb 26, 2015

This not works if you are in an iframe

@hitautodestruct

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

@l-vitaly

Thank you very much!

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

@float-mode

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

@pburtchaell
Owner

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

@JMarqz
JMarqz commented Jul 16, 2015

Thanks!

@Gang-Rel

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

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

@jochienabuurs

@Gang-Rel so true...

@Kzai
Kzai commented Sep 25, 2015

Sweet! :)

@wesruv
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
CarlaAG commented Feb 3, 2016

Thanks a lot :)

@zaygraveyard

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

@LarryAnomie

Thank you!!

@luckydonald

Danke!

@hjb23
hjb23 commented Aug 5, 2016

Merci beaucoup

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