Grow your CSS skills. Land your dream job.

iPhone rotate document width issue

  • # January 9, 2013 at 6:40 am

    Now before I go ahead and explain the issue, I have Googled, and forum trawled and I cannot for the life of me find an answer to this.

    When I first load the website on the iPhone (Chrome or Safari) the website is great. No scroll other than vertical. Great.
    [Screenshot here of how it should look](http://dl.dropbox.com/u/15262944/Iphone%20fail/Photo%2009-01-2013%2011%2033%2046.png “No horizontal scroll, sweet”)

    When I switch to horizontal, it again behaves as it should. [Horizontal looks good too.](http://dl.dropbox.com/u/15262944/Iphone%20fail/Photo%2009-01-2013%2011%2033%2055.png “Horizontal looks good too”)

    Now, switch back to vertical. This is where the fail happens. The document width does not scale back, and stays at the horizontal width (in both Chrome and Safari). [And now the site fails](http://dl.dropbox.com/u/15262944/Iphone%20fail/Photo%2009-01-2013%2011%2034%2001.png “FAIL”). So now there is horizontal scroll.

    I have these meta tags currently


    But they do not work.

    Is there an actual solution to this?

    # January 9, 2013 at 6:48 am

    It’s a bug with iOS safari, the only way to cure it is to use max/min viewport scales.

    However, I’d recommend that you don’t use those as they make it impossible for people to zoom on text etc, which is bad for those with visual impairments.

    Ultimately, there is no cure that I’ve found for this and it’s best to just move along and ignore it, after all it’s not that hard for people to quickly zoom out, not everything is in your control.

    # January 9, 2013 at 7:06 am

    > It’s a bug with iOS safari

    And apparently Chrome, they must use the same Webkit for it. It’s a major flaw. They should really fix it. They have to know about it.

    # January 9, 2013 at 7:25 am

    Did a little test, when the iPhone is rotated, the width of the document actually gets smaller. When rotated back, the width is smaller than the initial width of when the page was loaded. Seems a bit odd that this would happen.

    # January 9, 2013 at 1:23 pm

    Haven’t tried it…but http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/ basically, it disables zoom right before orientation changes based on the accelerometer

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".