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

Eri*_*rik 5 html5 mobile-safari viewport orientation device-orientation

在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>
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

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

为什么在方向改变后会出现右边的额外空间?我该如何预防呢?

小智 0

当您旋转设备时,mobile safari 会调整视口大小以匹配新方向。