Create a gist now

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.

Show comment
Hide comment
@branzeiradu

branzeiradu Oct 6, 2014

Thank you ! :D

Thank you ! :D

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Oct 30, 2014

楼主太帅了!

yisibl commented Oct 30, 2014

楼主太帅了!

@dylanaraps

This comment has been minimized.

Show comment
Hide comment

Thanks!

@pomm0

This comment has been minimized.

Show comment
Hide comment

pomm0 commented Nov 18, 2014

Thanks!

@galacticrobot

This comment has been minimized.

Show comment
Hide comment

nice!

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 20, 2014

What about other devices that have the same size(s)? Won't this catch more than just the stated devices?

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.

Show comment
Hide comment
@izakfilmalter

izakfilmalter Nov 24, 2014

Thank you so much for this!

Thank you so much for this!

@andreyantipov

This comment has been minimized.

Show comment
Hide comment

Thanks!

@enyo

This comment has been minimized.

Show comment
Hide comment
@enyo

enyo Jan 8, 2015

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

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.

Show comment
Hide comment
@sayber

sayber Feb 5, 2015

thx man!

sayber commented Feb 5, 2015

thx man!

@i-heart-php

This comment has been minimized.

Show comment
Hide comment
@i-heart-php

i-heart-php Feb 5, 2015

Awesome thanks!

Awesome thanks!

@azizultex

This comment has been minimized.

Show comment
Hide comment

cool

@alexclarkofficial

This comment has been minimized.

Show comment
Hide comment
@alexclarkofficial

alexclarkofficial Feb 25, 2015

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

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

@tobek

This comment has been minimized.

Show comment
Hide comment
@tobek

tobek Feb 25, 2015

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

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.

Show comment
Hide comment
@mems

mems Feb 26, 2015

This not works if you are in an iframe

mems commented Feb 26, 2015

This not works if you are in an iframe

@hitautodestruct

This comment has been minimized.

Show comment
Hide comment
@hitautodestruct

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

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

@anyotherway

This comment has been minimized.

Show comment
Hide comment
@l-vitaly

This comment has been minimized.

Show comment
Hide comment
@l-vitaly

l-vitaly Mar 24, 2015

Thank you very much!

Thank you very much!

@seavor

This comment has been minimized.

Show comment
Hide comment
@seavor

seavor 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

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.

Show comment
Hide comment
@nhoizey

nhoizey 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

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.

Show comment
Hide comment
@jopfre

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

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.

Show comment
Hide comment
@float-mode

float-mode Jun 19, 2015

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

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

@pburtchaell

This comment has been minimized.

Show comment
Hide comment
@pburtchaell

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

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.

Show comment
Hide comment

JMarqz commented Jul 16, 2015

Thanks!

@Gang-Rel

This comment has been minimized.

Show comment
Hide comment
@Gang-Rel

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

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.

Show comment
Hide comment
@hay

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

Show comment
Hide comment
@wizardist

wizardist Sep 11, 2015

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

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

@jochienabuurs

This comment has been minimized.

Show comment
Hide comment

@Gang-Rel so true...

@Kzai

This comment has been minimized.

Show comment
Hide comment
@Kzai

Kzai Sep 25, 2015

Sweet! :)

Kzai commented Sep 25, 2015

Sweet! :)

@wesruv

This comment has been minimized.

Show comment
Hide comment
@wesruv

wesruv 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

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.

Show comment
Hide comment
@CarlaAG

CarlaAG Feb 3, 2016

Thanks a lot :)

CarlaAG commented Feb 3, 2016

Thanks a lot :)

@zaygraveyard

This comment has been minimized.

Show comment
Hide comment
@zaygraveyard

zaygraveyard 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

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.

Show comment
Hide comment
@LarryAnomie

LarryAnomie May 9, 2016

Thank you!!

Thank you!!

@luckydonald

This comment has been minimized.

Show comment
Hide comment

Danke!

@hjb23

This comment has been minimized.

Show comment
Hide comment
@hjb23

hjb23 Aug 5, 2016

Merci beaucoup

hjb23 commented Aug 5, 2016

Merci beaucoup

@zocozo

This comment has been minimized.

Show comment
Hide comment

zocozo commented May 14, 2017

thanks!

@heyrm

This comment has been minimized.

Show comment
Hide comment
@heyrm

heyrm Jul 4, 2017

Thanks bro

heyrm commented Jul 4, 2017

Thanks bro

@juanmanavarro

This comment has been minimized.

Show comment
Hide comment
@juanmanavarro

juanmanavarro Aug 9, 2017

what happens when the keyboard is active?

what happens when the keyboard is active?

@mattxo

This comment has been minimized.

Show comment
Hide comment
@mattxo

mattxo Feb 2, 2018

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

mattxo commented Feb 2, 2018

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

@sombreroEnPuntas

This comment has been minimized.

Show comment
Hide comment

nice!

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