被小看的小巨人 - viewport

viewport浅入

相信全部的 web 开发者都见过亦或用过这个神奇的 meta 标签头，亦或在不明白或者半明半蒙的状况下就用上了。

先来解个疑惑 ，上图

chrome 的手持设备模拟器相信你们再熟悉不过了，那么左上角的320*480是神马 ？应该不少人已经在内心有了个答案。
在解开这个疑惑以前 须要引入一个概念：

A pixel is not a pixel is not a pixel

引用 W3cplus 此像素非彼像素中的一句话

是的，想说明的就是这里的320*480指的是你的设备的 dpx 而非 CSS 中的 px

至于有什么区别呢？
固然有区别！：

设备的 px 是指度量设备大小尺寸的一种单位，而咱们常在web 应用中使用的 px 是针对Web 应用开发用来度量应用程序中元素的相对尺寸，是一种抽象的概念和前面的设备像素是不搭噶的两种存在。

那么为何当咱们使用的 css 中的 px 来设计页面的时候 使用与设备上的的宽度一致时可以获得良好的视觉效应呢，且听我慢慢道来。

---

咱们先看下

关于 viewport 的 相关声明语法

<meta name="viewport" content="name=value,name=value">

首先引用下 ppk 文章中的英文解释(网络上大部分的出处出自此)：

---

Directives
Every name/value pair is a directive. (The word is my own invention.) 
There are six of them in total:

width     
    Sets the width of the layout viewport.
initial-scale       
    Sets the initial zoom of the page AND the width of the layout viewport.
minimum-scale
    Sets the minimum zoom level (i.e. how much the user can zoom out).
maximum-scale
    Sets the maximum zoom level (i.e. how much the user can zoom in).
height
    Is supposed to set the height of the layout viewport. It is not supported anywhere.
user-scalable
    When set to no prevents the user from zooming. This is an abomination that MUST NOT be used.

看不明白？好吧我找来翻译一把（翻译的有点强硬别见怪）：

指令
每对键值对都是一个指令，（ppk 大神的叫法）如下总计共有6对：
width
    设置layout viewport的宽度（css px）
initial-scale 
    设置页面的初始缩放比例同时能够设置layout viewport的宽度
minimum-scale
    设置最小缩放比例（指用户可以缩小到多小）
maximum-scale
    设置最大缩放比例（指用户可以放大到多大）
height
    设置layout viewport的高度，但暂时不怎么被支持
user-scalable
    设置是否容许用户放大缩小。ppk 指出这个属性很邪恶，最好别用（偷笑）

看到这里或许又蒙了一半 layout viewport是什么鬼？

ppk 大神的意思是想象下在咱们设置 viewport 后，浏览器可以生成3种 viewport 分别对应 visual viewport 、 layout viewport 和 ideal viewport。

这里我不打算掺杂过多的这些理论，只想要简单明了的方式解释（忽悠）出 使用viewport 会发生什么事，若是对 ppk 大神的这些理论感兴趣能够 go here

1.A tale of two viewports — part one
2.A tale of two viewports — part two
3.Meta viewport

---

大概的了解到 viewport 的语法后接下来就是案例讲解

当不使用 viewport 时咱们为 pc 设计的网站在手持设备上是怎么样的

这里拿百度的 pc 版作例子（由于 pc 版没有 viewport）首先在非模拟器状态下打开百度而后切换到模拟器状态下

咱们能够看到的是整个 pc 版的页面被压缩到宽度仅有320px（非 css 单位）的设备中 ，正常人都没办法使用吧？
那么，这个时候这个页面的宽度是多少呢（css px）？

咱们选中 html 元素，查看右下角的盒子样式 能够明确的看到当前的页面宽度是980px（css px）

也就是说浏览器在只有320dpx 的状况下展现了980px 的页面（明显能够看出这里的 dpx 与 px 并非1：1的关系）

可是咱们从左下角的样式表内并无看到 html 的 width，那么这个 html 的980 px宽是哪来的呢

答案是来自 viewport的！ 别忘记了上面的 viewport 语法，也就是说 viewport设置了宽度为980px，可是前面不是说了这个例子使用的是百度的 pc 端的页面没有 viewport 吗？

那由哪来的 viewport 设置宽度呢 ，看到这里相信已经有人有答案了，没错当你没有设置 viewport 的时候浏览器会自动为你采用默认值 那么默认值是多少？

这里找来 ppk 的测试

什么意思呢 其实意思就是在默认的状况下（针对手持端）若是你没有设置过 viewport 那么我浏览器就会根据我自个设备决定采用viewport宽度是多少。

知道了这些还不够 ，那么为何我有了 viewport 设置宽度以后 html 就会采用其宽度呢 ：

能够这么理解，viewport是一种超越 html 元素的存在，当没有为 html 设置宽度的时候，html 的宽度继承于 viewport设置的宽度

就拿w3cplus举个例子：

和上面的同样拿 pc 版测试，默认没有 viewport 查看 html 宽度果真为980px

接下来为 html 元素设置宽度为50% 能够看到效果 其宽度值为490px

到这里咱们能够得出一个总结：

viewport 其实就是设置在当前设备的宽度下展现多少CSS px的网页内容

上一个例子咱们已经看到当 html 文档的宽度小于 viewport 的宽度是会有什么样的效果，那么反过来若是设置 html 的宽度大于 viewport 又会是什么效果呢

这里设置 html的宽度为2000px 能够看出页面出现了滚动效果。

这里又得出一个总结：

当 html 文档的宽度小于 viewport 的宽度时以文档的实际宽度为准，文档少于 viewport 宽度的部分不显示内容，当 html文档的宽度大于 viewport 的时候，你能看到的区域依然是 viewport 的大小区域，不过你能够经过滑动或滚动页面来查看大于viewport 区域的内容

至此咱们已经知道了设备宽度与 viewport 的宽度以及实际文档的宽度之间的关系。

经过上述的例子咱们知道基本上 viewport 的默认宽度是980px，且浏览器会将者 viewport 大小的 html 文档塞进有限的设备宽度内（浏览器会动态计算文档的布局及内容），因此咱们看到的东西都很小。
那么咱们想要清除的看清文档内的内容怎么办 ，没错，缩小 viewport 的大小，什么原理？
当咱们缩小 viewport 的宽度的时候文档的宽度也对应的被缩小，即同样的设备宽度，我显示的东西少了（这时候浏览器从新计算文档布局及内容）能够看到的结果是字体被放大了，内容都被放大了！

这里仍是拿W3CPlus的网站作例子：同样的拿 pc 版的无 viewport 的文档放入手持设备内，没办法看清内容

这时候我在控制台输入这么一段代码：

document.head.insertAdjacentHTML('afterbegin','<meta name="viewport" content="width=320">');

这时候是否是清晰不少呢~。

知道了这个原理，那咱们要把 viewport 的大小缩小到多小比较合适呢 ？答案是和你的设备宽度同样宽。可是并非每一个手持设备都是320dpx宽啊，这时候咱们能够这样写 viewport 头：

<meta name="viewport" content="width=device-width">

这样就会自动计算你的设备宽度了，此处应该有掌声~

可是这个时候并未结束，是的 ，当你把你原先的980宽的页面重置成了320宽 那页面布局固然就发生变化了，惨的，没法入目，这时候就得考验你们的 css 功底了，如何避免不在此文章讨论范围内。

---

扩展思考

1.当咱们在手持设备上放大缩小页面的时候，发生了什么？
2.设备的宽度与分辨率的关系？为何咱们在作 iphone 图的时候640但到了页面只能为320？

解释：
1.
当咱们在手持设备上放大的时候，设备的大小不变（废话），viewport 的大小不变， html 的大小不变，那变的是什么？
咱们知道当咱们设置了 <meta name="viewport" content="width=device-width">页面的宽度是与设备的宽度一致的达到1：1的关系
其实变得是你的可视区域 也就是 ppk 大神说的visual viewport，抛开他的理论，简单的理解就是你当你触发放大的是个动做时，页面的每一 css px宽度对应了多个设备的像素宽度（这里暂时不谈分辨率），因此你能看到元素被放大了，可是因为设备的宽度有限，因此你看到的内容也就少了，而viewport在咱们一旦设置好后没有手动修改的话是不会发生变化的包括这里。
故 缩小引起的原理同样。

2.
设备的宽度的 px 和分辨率的关系？
在没有视网膜屏幕出现前 除了些高清屏幕外，大部分的手持设备的宽度与分辨率像素是一对一的关系，直到视网膜屏幕的出现打破了这个格局 出现一个设备宽度对应2个或不少的分辨率像素，引起什么结果？固然是更清晰了，由于用了更多的像素去表达相同的一个设备宽度像素的内容。更多细节探讨能够自行 度娘 更多。

了解了设备宽度与分辨率的关系以后 解释下图片与分辨率的关系，一般图片的像素是与分辨率对应的，故设计师在 ps 上用640分辨率设计图片的时候起始也是对应咱们的设备宽度320（前面解释到视网膜屏幕一个设备像素会对应2个到多个分辨率像素），设计出来的图片同理。固然你把设计出来的640分辨率像素的图片放在同样是320宽度像素下的视网膜设备和非视网膜设备下的效果看起来差很少其实仔细看仍是有差异的便是否更高清的差异（能够拿安卓和 ios对比）。

---

弄清楚了viewport 这个小巨人后咱们还得知道如何经过 js 代码来获取设备的宽度、viewport 的宽度以及 html 文档的宽度

总结以下（不包括 IE 及其余特殊状况）：

/*
*1.获取包含滚动条尺寸的浏览器完整内部尺寸
*2.获取用户实际的看到的视口大小（即发送缩放后的可视区域大小|visual viewport 大小）默认等于viewport大小
*/
window.innerHeight
window.innerWidth 

/*
*1.设置的viewport大小
*/
document.documentElement.clientHeight
document.documentElement.clientWidth

/*
*1.HTML 文档大小
*/
document.documentElement.offsetHeight
document.documentElement.offsetWidth

/*
*1.设备大小
*/
screen.Height
screen.width

网上有大量的关于 viewport 的讨论，不乏各类大神的讲解，各有千秋。以上只为我的多日查阅实践及总结，仅做参考！多谢！