一,关于深入理解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查询的网站
时间: 2024-10-07 14:49:04