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

浏览数：20 / 时间：2015年06月11日

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

http://www.cnblogs.com/2050/p/3877280.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/

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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