对移动终端viewport理解的深入浅出

发布时间：2020/07/25 丨 文章来源：测试 丨 浏览次数：

166 1、简单点说，移动设备的前端viewport就是我们在手机上能进行屏幕观看的网站视角。一般情况下PC终端的浏览器的的分辨率是960x1140，960可以说是比较普遍的页面宽度，它可以把浏览器在最大化的时候使用最大可能性的宽度比值而不出现滚动条。一般电脑的分辨率都在1024x768左右，移动设备的viewport是layout viewport,但在对网站编程和修改的时候。必须的是ideal viewport，这就轮到meta标签派上用场了。
最直接的方法就是：<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">，把这条代码复制到编码的“头部”就可以了。 2、移动端的物理像素分辨率已经远远超越了PC端的，移动端的1PX并不等于PC端物理像素中的1PX，然而像素却高了，这证明了一个像素的基本单位里面增加了好几个像素点。在我们的电脑系统中，存在一个device PixelRatio属性，也即是：电脑信息输出设备的物理像素和设备独立像素的比例，也就是device PixelRatio=物理像素和独立像素的比值。
3、viewport在Html5有很广泛和实用的运用，html 5是w3c和WHATWG结合的新一代的网站设计和编程。