<html>
<head>
</head>
<body>
<div class="clearfix" style="width:800px;height:568px;background:red;text-align:center">
测试测试测试测试测试测试测试测试 800*558
</div>
</body>
</html>
效果如下：
可以看到这不是我们想要的结果，由于默认的布局viewport 980px ，visual viewport 320px，导致我们的页面会先在
布局viewport渲染，在缩放到visual viewport
在看下面的代码
<html>
<head>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<div style="width:320px;height:568px;background:red;text-align:center">
测试测试测试测试测试测试测试测试 320*558
</div>
</body>
</html>
再看下面这种情况
<html>
<head>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<div style="width:800px;height:568px;background:red;text-align:center">
测试测试测试测试测试测试测试测试 800*558
</div>
</body>
</html>
解决方式：不让度量viewport缩放
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>
<body>
<div style="width:800px;height:568px;background:red;text-align:center">
测试测试测试测试测试测试测试测试 800*558
</div>
</body>
</html>
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
