Question

在iPad上的Mobile Safari中，我在更改设备方向后会遇到一些奇怪的行为。这是我的测试文件：

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

当我使用我的iPad纵向移动URL并进行一些滑动手势时，页面不会滚动，这是正确的。

然而，当我将设备旋转到横向模式并进行一些滑动手势时，我没有明显的理由在右侧获得额外的空间。

但更奇怪的是，当我重新启动移动Safari并在横向方向上转到URL时，右侧的额外空间不存在。

为什么在更改方向后会出现右侧的额外空格？我该如何预防？

Answer 1

旋转设备时，移动safari会调整视口大小以匹配新方向。

Answer 2

似乎移动safari试图将视图位置保持在屏幕的中心。您可以通过以下参数进行检查 window.outerWidth和window.scrollX。加载页面和更改方向纵向后它们不同 - ＆gt;风景 - ＆gt;肖像。

我认为这个话题与其他讨论有关 Mobile site resize on orientation change not working in 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);
});

如何防止在移动旅行中改变方向后获得额外的宽度

2 个答案: