【移动端web开发】（二）深入viewport

前言

通过上一篇我们已经大概明白viewport是什么，但是viewport并没有那么简单，一包研究得身心疲惫，脑子一个不够用哈哈，让我们一起看看吧！

三个viewport

ppk认为，有三个viewport

1. layout viewport

• 我们先回想一下，当有一个为PC端设计的网页想要放在移动端浏览的时候，如果我们以浏览器的可视窗口作为viewport，那由于移动端的屏幕很小，所以这个网页必然会因为viewport太小而挤在一起导致无法正常显示网页，甚至布局会乱掉。所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，如iphone把viewport设为980px，通过这个viewport移动端的浏览器就可以把整个网页显示在手机屏幕上，但是整个网页是被缩小的。ppk把这个浏览器默认的viewport叫做 layout viewport,我们看一下这张图就明白了。

我们可以通过
document.documentElement.clientWidth来获得布局视窗的宽和高。

image

2. visual viewport

• 然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。如图：

用window.innerWidth/Height或者document.documentElement.offsetWidth计算visual viewport的宽度

image

注意，visual viewport尺寸所对应的并不是指屏幕区域里的物理像素，而是CSS 像素。并且它所包含的 CSS 像素的数量也是随着用户缩放而有所改变。

layout viewport和visual viewport

• 当进行缩放（如果你放大，屏幕上的CSS像素会变少）的时候，visual viewport(就是页面当前显示在屏幕上的部分)的尺寸会发生变化，layout viewport的尺寸仍然跟之前的一样。
• visual viewport就像一个框，layout viewport就像一张纸，也就是纸上有一个框，框对准纸的哪个部分，你就能看见哪个部分（假设框外部分不可见）。你可以把框靠近或远离纸（调整缩放比例），也可以改变框的位置（调整滚轮），这些方法都可以改变visual viewport，但是layout viewport始终不变。
  visual viewport用css像素来衡量尺寸，表示有多少个css像素能够被用户看到。
• 当你进行页面放大的时候，原本在未缩放的页面上看起来很小的尺寸，现在通过viewport看上去变大了，事实上这部分的css的px值并没有变化，仅仅是因为进行放大后，css的1px的值所占的屏幕分辨率的值变大了。同理，当你缩小整个页面的时候原本看起来很大的尺寸，现在再通过viewport看上去的时候又变小了。同理,css的1px的值并没有发生变化,但是1px值所占的屏幕分辨率的值变小了。所以，放大的时候，css像素个数减少，visual viewport尺寸减小，缩小的时候，css像素个数增多，，visual viewport尺寸增大

3. ideal viewport

• 现在我们已经有两个viewport了：layout viewport 和 visual viewport。但是由于原网页会在我们的移动端缩小，如果我们需要看清文字，我们往往放大才可以看清字，可是当我们放大的时候，又没办法看到整个网页，这时想浏览整个网页，我们又不得不左右滑动屏幕（横向滚动条）。
• 于是我们必须还要有一个能完美适配移动设备的viewport，所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，另外显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。
• ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等。

总结一下：ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。从另一角度看，idea viewport其实就是改变了尺寸layout viewport，idae viewport其实就是把layoutviewport调整到一个合适的，理想的状态，使页面在移动端有最佳的显示效果，即无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要横向滚动条就可以完美地呈现给用户。那么如何把layout viewport调整到idea viewport呢，下面我们来看一下：

把当前的viewport宽度设置为 ideal viewport 的宽度

怎么设置呢？看看这段代码：

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

相信有做过移动端开发的同学都熟悉这段代码，不管你是不是熟悉移动端开发的原理，像我之前一样，不懂viewport，像素是啥，但是我把这段代码写进了haed标签里，其实就成功了一半。
没错，这段代码就是把把默认的layout viewport的宽度设为移动设备的屏幕宽度，也就是把当前的viewport宽度设置为 ideal viewport 的宽度。

我们来看看各个属性是什么意思：

• width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
• initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
• minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
• height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用
• user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

width=device-width

width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width，width=device-width 也就是将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。

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

可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

initial-scale=1

initial-scale用于指定页面的初始缩放比例，缩放是相对于 ideal viewport来进行缩放的，因此当initial-scale=1时，表示将layout viewport的宽度设置为 ideal viewport的宽度。

<meta name="viewport" content="initial-scale=1" />

可以知道initial-scale=1 也能把当前的viewport宽度变成 ideal viewport 的宽度，但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。

综上，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。

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

width 和 initial-scale=1同时出现，并且还出现了冲突呢

当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。

关于minimum-scale=1, maximum-scale=1，user-scalable=no

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

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

可以看到第二段代码我们把minimum-scale=1, maximum-scale=1这两个属性去掉了，但效果是一样的，因为添加了user-scalable=no 那么，minimum-scale=1, maximum-scale=1这两个属性就没必要追加了。因为你都已经禁止了用户缩放页面了，允许的缩放范围也就不存在了。

总结

1. 所有的scale指令都是相对于ideal viewport的。无视layout viewport设置了多少，所以maximum-scale=3意味着最大的缩放值是ideal viewport的300%

2. layout viewport能被设置成ideal viewport。width=device-width和initial-scale=1指令可以做到。

3. 针对某个设备的ideal viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的，这是因为市场上虽然有不同分辨率，不同型号的手机，但是他们的ideal viewport是十分接近的。

4. ideal viewport会随设备转向而改变。如Iphone 5s 尺寸为320*568。在竖屏模式下宽度为320px，而在横屏模式下宽度为568px。

参考文章

1. https://www.cnblogs.com/2050/p/3877280.html#!comments
2. http://yunkus.com/meta-viewport-usage/
3. https://blog.csdn.net/as1172010632/article/details/79992360

（写到这里要吐血了哈哈）