5

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

您可以通过以下 URL 在 Mobile Safari 中查看它：

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

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

但是，当我将设备旋转到横向模式并做出一些滑动手势时，我在右侧获得了额外的空间，没有明显的原因。

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

为什么方向改变后会出现右侧的多余空间？我该如何预防呢？

4

2 回答 2

0

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

于 2011-03-17T09:45:24.320 回答
0

似乎移动 safari 试图将视图位置保持在屏幕中央。您可以通过以下参数 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);
});
于 2013-09-18T20:53:24.600 回答