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时,右侧的额外空间不存在.
为什么在方向改变后会出现右边的额外空间?我该如何预防呢?
| 归档时间: |
|
| 查看次数: |
1270 次 |
| 最近记录: |