Geek Answers Handbook

How to prevent an increase in extra width after changing orientation in a mobile safari

In Mobile Safari on my iPad, I get some weird behavior after changing the orientation of the device. Here is my test file:

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="initial-scale=0.7" />
        <style>
            #block {
                border: 1px solid red;
                background-color: yellow;
                font-size: 400%;
                width: 700px;
                height: 500px;
            }   
        </style>
    </head>
    <body>
        <div id="block">Hello world!</div>
    </body>
</html>

You can view it in Mobile Safari at this URL:

http://fiddle.jshell.net/eterps/jsTqj/show/

When I send the URL to my iPad in portrait orientation and make a few gestures, the page does not scroll, which is correct.

However, when I turn the device into landscape mode and make several gestures, I got additional space on the right for no apparent reason.

But even stranger is the fact that when I restart the mobile safari and go to the URL, being in landscape orientation all the time, there is no extra space on the right.

? ?

+5
2

, .

0

, . , window.outerWidth window.scrollX. → → .

, , Safari

, script

$(window).bind('orientationchange', function() { 
  var oldWidth = $('body').innerWidth();
  $('body').width(oldWidth + 1); // Force redraw
  $('body').width(''); // Return to previous state in case if width set by css, otherwise use  $('body').width(oldWidth);
});
0

More articles:


All Articles