Как предотвратить увеличение ширины после изменения ориентации в мобильном сафари - PullRequest
5 голосов
/ 08 марта 2011

В Mobile Safari на моем iPad после смены ориентации устройства наблюдается странное поведение.Вот мой тестовый файл:

<!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>

Вы можете просмотреть его в Mobile Safari по этому адресу:

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

Когда я иду по URL с моим iPad вкнижная ориентация и выполнение некоторых жестов смахиванием, страница не прокручивается, что является правильным.

Однако, когда я поворачиваю устройство в альбомный режим и делаю некоторые жесты смахиванием, я получаю дополнительное пространство справа без видимой причины.

Но еще более странным является тот факт, что когда я перезагружаю мобильное сафари и перехожу на URL, находясь в горизонтальной ориентации все время, дополнительного свободного места справа нет.

Почемудополнительное пространство справа появляется после смены ориентации?И как я могу предотвратить это?

Ответы [ 2 ]

0 голосов
/ 19 сентября 2013

Похоже, мобильное сафари пытается удерживать позицию просмотра в центре экрана. Вы можете проверить это по следующим параметрам window.outerWidth и window.scrollX. Они различаются после загрузки страницы и изменения ориентации портрета -> пейзаж -> портрет.

Я думаю, что эта тема связана с другим обсуждением Изменение размера мобильного сайта при смене ориентации в Safari

Вы можете принудительно перерисовать страницу и скрыть пробел, следуя сценарию

$(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 голосов
/ 17 марта 2011

При повороте устройства мобильное сафари изменяет размер области просмотра в соответствии с новой ориентацией.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...