Instantly share code, notes, and snippets.

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

This comment has been minimized.

branzeiradu commented Oct 6, 2014

Thank you ! :D

@yisibl

This comment has been minimized.

yisibl commented Oct 30, 2014

楼主太帅了!

@dylanaraps

This comment has been minimized.

dylanaraps commented Oct 31, 2014

Thanks!

@pomm0

This comment has been minimized.

pomm0 commented Nov 18, 2014

Thanks!

@galacticrobot

This comment has been minimized.

galacticrobot commented Nov 19, 2014

nice!

@ghost

This comment has been minimized.

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

This comment has been minimized.

izakfilmalter commented Nov 24, 2014

Thank you so much for this!

@andreyantipov

This comment has been minimized.

andreyantipov commented Dec 10, 2014

Thanks!

@enyo

This comment has been minimized.

enyo commented Jan 8, 2015

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

@sayber

This comment has been minimized.

sayber commented Feb 5, 2015

thx man!

@i-heart-php

This comment has been minimized.

i-heart-php commented Feb 5, 2015

Awesome thanks!

@azizultex

This comment has been minimized.

azizultex commented Feb 10, 2015

cool

@alexclarkofficial

This comment has been minimized.

alexclarkofficial commented Feb 25, 2015

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

@tobek

This comment has been minimized.

tobek commented Feb 25, 2015

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

@mems

This comment has been minimized.

mems commented Feb 26, 2015

This not works if you are in an iframe

@hitautodestruct

This comment has been minimized.

hitautodestruct commented Mar 3, 2015

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

@ghost

This comment has been minimized.

ghost commented Mar 11, 2015

"Partial support... (see workaround)." (http://caniuse.com/#feat=viewport-units)
"/" not at https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax
Try something else.

@l-vitaly

This comment has been minimized.

l-vitaly commented Mar 24, 2015

Thank you very much!

@seavor

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

float-mode commented Jun 19, 2015

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

@pburtchaell

This comment has been minimized.

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

This comment has been minimized.

JMarqz commented Jul 16, 2015

Thanks!

@Gang-Rel

This comment has been minimized.

Gang-Rel commented Aug 12, 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

This comment has been minimized.

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

This comment has been minimized.

wizardist commented Sep 11, 2015

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

@jochienabuurs

This comment has been minimized.

jochienabuurs commented Sep 17, 2015

@Gang-Rel so true...

@Kzai

This comment has been minimized.

Kzai commented Sep 25, 2015

Sweet! :)

@wesruv

This comment has been minimized.

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

This comment has been minimized.

CarlaAG commented Feb 3, 2016

Thanks a lot :)

@zaygraveyard

This comment has been minimized.

zaygraveyard commented Feb 12, 2016

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

@LarryAnomie

This comment has been minimized.

LarryAnomie commented May 9, 2016

Thank you!!

@luckydonald

This comment has been minimized.

luckydonald commented May 19, 2016

Danke!

@hjb23

This comment has been minimized.

hjb23 commented Aug 5, 2016

Merci beaucoup

@zocozo

This comment has been minimized.

zocozo commented May 14, 2017

thanks!

@helloromero

This comment has been minimized.

helloromero commented Jul 4, 2017

Thanks bro

@juanmanavarro

This comment has been minimized.

juanmanavarro commented Aug 9, 2017

what happens when the keyboard is active?

@mattxo

This comment has been minimized.

mattxo commented Feb 2, 2018

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

@sombreroEnPuntas

This comment has been minimized.

sombreroEnPuntas commented Apr 26, 2018

nice!

@AndreaRivadossi

This comment has been minimized.

AndreaRivadossi commented Sep 12, 2018

Thanks 👍

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