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