您的位置：首页 > 移动开发 > WebAPP

Webapp---深入理解viewport，viewport测试，viewport查询网站

2015-04-01 10:12 246 查看

一，关于深入理解viewport，这里推荐一篇文章：

/article/5062193.html

二，这是一段viewport测试代码，可以输出layout viewport，visual viewport，ideal viewport；

其实我们最关心的是：ideal viewport的宽度，然后基于这个宽度做流式布局的webapp开发。

<html>
<head>
<meta charset="utf-8">
<!--        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">-->
</head>
<body>
<h1>viewport测试</h1>
<script>
var lvw = document.documentElement.clientWidth;
var lvh = document.documentElement.clientHeight;
//            document.write("<p>layout viewport:"+lvw+"*"+lvh+"</p>");
alert("layout viewport:"+lvw+"*"+lvh);

var vvw = window.innerWidth;
var vvh = window.innerHeight;
alert("visual viewport:"+vvw+"*"+vvh);

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
var ivw = document.documentElement.clientWidth;
var ivh = document.documentElement.clientHeight;
alert("ideal  viewport:"+ivw+"*"+ivh);
</script>
</body>
</html>

三，关于viewport查询的网站

http://viewportsizes.com/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航