关闭

随记

265人阅读 评论(1) 收藏 举报
<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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:54475次
    • 积分:1047
    • 等级:
    • 排名:千里之外
    • 原创:42篇
    • 转载:32篇
    • 译文:3篇
    • 评论:3条
    文章分类
    最新评论