【移动端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来得到布局视窗的宽和高。

2. visual viewport

• 然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，因此咱们还须要一个viewport来表明 浏览器可视区域的大小，ppk把这个viewport叫作 visual viewport。如图：

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

注意，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/...
2. http://yunkus.com/meta-viewpo...
3. https://blog.csdn.net/as11720...

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