CODEWITHSUNDEEP
iosiphonecssipadviewport
mildrenben
mildrenben

Reputation: 3757

Website isn't displaying on iOS properly, is it increasing my viewport units?

I have a site up, http://www.webdesignrepo.com, where I'm using vw and vh a lot.

The site works absolutely fine on Desktop and on Android browsers, but goes haywire in iOS on both the iphone and the ipad. The Desktop media query is mainly vw and vh. Once you get down to <768px wide I have swapped out some of the viewport units with px units.

I have a feeling it's something easy to fix, and I'm just not seeing something simple.

The only thing I can think of is its calculating the vw and vh units incorrectly, which is odd because caniuse.com says iOS safari 6.1 and above supports viewport units.

Anyone have any idea why this is happening?

(And yes, I see the irony of this whole situation)

Thanks in advance

Upvotes: 1

Views: 1374

Answers (2)

guscordova
guscordova

Reputation: 46

In iOS the vw or vh units render incorrectly when content inside an element changes.

This site http://mjau-mjau.com/blog/ios-vh-bug/ provides a useful workaround using Javascript, and iOS specific.

I however, did not want to use JS and decide to override the vw and vh font sizes with em for all mobile devices,

@media only screen and (max-device-width: 480px) {
    .caption h1{
        font-size: 6em;
    }

    .caption h2{
        font-size: 4.3em;
    }

    .caption h1:first-letter {
        font-size: 1.5em;
    } 

    .caption p {
       font-size: 1.2em;
    }
}

Upvotes: 0

user3185548
user3185548

Reputation:

iOS 6 and 7 seem to calculate viewport height correctly at first, but any call to vh after rendering the page recalculates the viewport height and adds it to the previous value, inconsistently resulting in an enormously tall page. Unfortunately, this is not consistent and currently there is no known workaround.

The caniuse.com viewport section's interactive mode links to a GitHub issue page explaining in more detail and Emil Björklund explains with some diagrams on his blog.

Upvotes: 3

Related Questions