关于前端:viewport深入理解和使用

什么是viewport ?

viewport是用户网页的可视区域，也可叫做视区。手机浏览器是把页面放在一个虚构的窗口(viewport)中，通常这个虚构的窗口比屏幕宽，这样就不必把网页挤到很小的窗口中，用户能够通过平移和缩放来看网页的不同局部。

下图为常见一些设施浏览器默认viewport宽度：

css中的1px不等于设施的1px

在css中常常应用px做单位，PC端浏览器中的1px往往都是对应电脑屏幕的1个物理像素，这救我让咱们误以为1px就是一个物理像素，事实并非如此，在不同设施不同环境下，css的1px所代表的设施物理像素是不同的。用户缩放也会影响。如果把页面放大一倍，那么css1px所代表的物理像素也会增加一倍，反之，也会放大一倍。

挪动端浏览器中，window对象有devicePixelRadio属性，官网定为为：设施物理像素和独立像素的比例。

devicePixelRadio = 物理像素 / 独立像素

css中的px就能够看作独立像素。

学习viewport的具体用法之前，先搞清楚几个概念：

　　layout viewport：是网页的所有内容，能够全副或者局部展现给用户。

　　可通过 document.documentElement.clientWidth来获取

　　visual viewport：以后显示给用户内容的窗口，能够拖动或者放大放大网页。

　　可通过 window.innerWidth 来获取。

　　ideal viewport： 挪动设施的屏幕宽度。

　　　　　　　　　　ideal viewport并没有一个固定尺寸，所有的iphone的ideal viewport宽度都是320px,也就是css中的320px就代表iphone屏幕的宽度。然而安卓手机机型较多，有320px、360px、384px等，所以各个设施ideal viewport不同。　 　　　　　

设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0 , maximum-scale=1.0 , user-scalable=no" >

该meta的作用是让以后viewport的宽度等于设施的宽度，不容许用户手动缩放。

别离对meta的各个属性介绍如下：

这些属性能够同时应用，应用时用逗号隔开，也能够独自应用。

此外，安卓手机还反对target-densitydpi 这个公有属性，它示意指标设施的密度等级，决定css中1px代表多少物理像素。

target-densitydpi值能够为数值或 high-dpi、medium-dpi、low-dpi、device-dpi这几个字符中的一个
target-densitydpi = device-dpi时，css的1px就等于物理像素1px。因为只有安卓反对，所以咱们尽量避免应用它，作为理解就好了。

缩放原理

缩放是绝对于ideal viewport来缩放的，缩放值越大，以后viewport的宽度就会越小，反之亦然。

举例：在iphone中，如果咱们设置 initial-scale = 2 ，也就是默认放大2倍，此时viewport就放大了2倍变成了160px。就是原来的1px变成了2px的长度，放大之后原来须要320px能力填满的宽度，当初只须要160px就能够做到。因而咱们能够得出一个公式：

visual viewport宽度 = ideal viewport宽度 / 以后缩放值

以后缩放值 = ideal viewport宽度 / visial viewport宽度

ps: visual viewport的宽度指的是浏览器可视区域的宽度。

大多数浏览器都合乎这个实践，然而安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是体现失常的，也就相当于这实践在它身上根本没用；而IE则基本不甩initial-scale这个属性，无论你给他设置什么，initial-scale体现进去的成果永远是1。

好了，当初再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是1，因为当 initial-scale = 1 时，以后的layout viewport宽度会被设为 ideal viewport的宽度，但后面说了，各浏览器默认的 layout viewport宽度个别都是980啊，1024啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值必定不是1。安卓设施上的initial-scale默认值如同没有办法可能失去，或者就是罗唆它就没有默认值，肯定要你显示的写进去这个货色才会起作用，咱们不论它了，这里咱们重点说一下iphone和ipad上的initial-scale默认值。

依据测试，咱们能够在iphone和ipad上失去一个论断，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会主动计算initial-scale这个值，以保障以后layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会呈现横向滚动条。比如说，在iphone上，咱们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但咱们能够看到浏览器并没有呈现横向滚动条，浏览器默认的把页面放大了。依据下面的公式，以后缩放值 = ideal viewport宽度 / visual viewport宽度，咱们能够得出：

以后缩放值 = 320 / 980
也就是以后的initial-scale默认值应该是 0.33这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。

总之记住这个论断就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会主动计算这个缩放值，以达到以后页面不会呈现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目标。

动静批改

办法1：应用document.write动静输入meta标签

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')办法2：通过setAttribute来扭转<meta id="testViewport" name="viewport" content="width = 380"><script> var mvp = document.getElementById('testViewport'); mvp.setAttribute('content','width=480');</script>

说了那么多废话，最初还是有必要总结一点有用的进去。

第一：如果不设置meta viewport标签，那么挪动设施上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表理论屏幕物理像素的px不是一回事。

第二：每个挪动设施浏览器中都有一个现实的宽度，这个现实的宽度是指css中的宽度，跟设施的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。咱们能够用meta标签把viewport的宽度设为那个现实的宽度，如果不晓得这个设施的现实宽度是多少，那么用device-width这个非凡值就行了，同时initial-scale=1也有把viewport的宽度设为现实宽度的作用。所以，咱们能够应用

<meta name="viewport" content="width=device-width, initial-scale=1">

来失去一个现实的viewport（也就是后面说的ideal viewport）。

为什么须要有现实的viewport呢？比方一个分辨率为320x480的手机现实viewport的宽度是320px，而另一个屏幕尺寸雷同但分辨率为640x960的手机的现实viewport宽度也是为320px，那为什么分辨率大的这个手机的现实宽度要跟分辨率小的那个手机的现实宽度一样呢？这是因为，只有这样能力保障同样的网站在不同分辨率的设施上看起来都是一样或差不多的。实际上，当初市面上尽管有那么多不同品种不同品牌不同分辨率的手机，但它们的现实viewport宽度归纳起来无非也就 320、360、384、400等几种，都是十分靠近的，现实宽度的相近也就意味着咱们针对某个设施的现实viewport而做出的网站，在其余设施上的体现也不会相差十分多甚至是体现一样的。