移动端适配

原文地址：深入浅出移动端适配（总结版）

三、视口

Viewport翻译成中文可以叫“视窗”或者是”视口“，它表示的是用户网页的可视范围（指页面能够被浏览的范围）

在移动设备上进行网页的重构或开发，首先你得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备

3.1三个viewport

ppk大神对于移动设备上的viewport有着非常多的研究，ppk认为，移动设备上有三个viewport。

首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为了移动设备设计的网站。

但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。

如果把移动设备上浏览器的可视区域设备viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个比较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器正常显示了。ppk把这个浏览器默认的viewport叫做layout viewport（布局视口）。
layout viewport的宽度可以通过document.documentElement.clientWidth来获取。

image.png

然而，layout viewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做visual viewport（视觉窗口）。
visual viewport的宽度可以通过window.innerWidth来获取。

image.png

将layout viewport想象为一个不会改表大小或形状的大图像。现在想象你有一个较小的框架，通过它可以看到这个大图片。小框架由不透明的材料构成，通过它你只能看到大图的一部分，这一部分就叫做visual viewport。你可以拿着这个框架和图像拉开一定的距离（zoom out）看到整个图像，你也可以让自己离图像更近（zoom in ）看到其中的一部分。你也可以旋转这个框架的方向，但是这个图片（layout viewport）的大小和形状永远不会改变。

ps：visual viewport的宽度值的是浏览器可是区域的宽度

现在我们已经两个viewport了：layout viewport 和 visual viewport。

但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个完美适配移动设备的viewport。
所谓的完美适配指的是：
1、首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
2、显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素图片什么的也是这个道理。
ppk把这个viewport叫做ideal viewport (理想视口)，也就是第三个viewport-移动设备的理想viewport。
ideal viewport可通过window.screen.width获取

ideal viewport 并没有一个固定的尺寸，不同的设备拥有不同的ideal viewport。
只要在css中把某一元素的宽度设为edeal viewport的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果

ideal viewport的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

3.2关于layout viewportt的一些细节

1、css布局，尤其是百分比宽度，是相对于layout viewport的宽度计算的（即页面最顶级元素html的自适应宽度的参考系就是layout viewport的宽度），它要比visual viewport宽的多
2、layout viewport和visual viewport都是由css像素测量的，但是visual viewport的尺寸会随着缩放变化（如果你进行放大操作，那么屏幕上将展示更是的css像素），而layout viewport的尺寸将保持不变。（否则，你的页面将会继续地按百分比回流和重新计算，这是我们不想看到的）
3、大部分手机浏览器会初始展示整个页面在一屏之内（完全的缩小模式下），也就意味着这些浏览器会默认使用layout viewport的尺寸，这样它就可以在完全缩小的模式下完全覆盖屏幕，因此layout viewport和visual viewport的尺寸相同。
4、layout viewport的宽度和高度等于在最大模式下的屏幕显示内容的宽度和高度，当用户放大缩小时，layout viewport的尺寸保持不变。
5、安卓的webkit内核和IE的最小视口大小是320px ,因此当给你layout viewport设置小于320的值时，浏览器会自动重置味ideal viewport的宽度
6、layout viewport的最大宽度是10000px
7、layout viewport的最小宽度大约为ideal viewport的宽度的十分之一

3.3 Meta viewport

元素表示那些不能由其它HTML相关元素之一表示的任何元数据信息，它可以告诉浏览器如何解析页面，我们可以借助元素的viewport来帮助我们设置视口、缩放等，从而让移动端得倒更好的展示效果。

3.3.1指令

元素可以通过设置其name为viewport，然后对其content设置不同的指令，从而可以达到控制viewport的目的

对content设置指令的语法格式如下：

其中每一对健值对都是一个指令，Meta Viewport共有6组指令：
1.width，设置layout viewport的宽度，为一个正整数，或关键词device-width
2.initial-scale，设置页面的初始缩放值，为一个大于0的小数
3.minimum-scale，允许用户的最小缩放值，为一个大于0的小数
4.maximum-scale，允许用户的最大缩放值，为一个大于0的小数
5.height，设置layout viewport的高度，有这个属性，但是好像并没有人支持
6.user-scalable，是否允许用户进行缩放，值为yes或no

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

3.3.2和ideal viewport不得不说的事情

layout viewport可以设置成为ideal viewport，通过设置width=device-width这组指令就可以了（但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，device-width都是竖屏时ideal viewport的宽度）

initial-scale=1同样也可以把当前的layout viewport变为ideal viewport，这是为什么呢？

要想弄清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是1，也就是没缩放，但却达到了ideal viewport的效果，所以，那答案只有一个，缩放是相对于ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，不就得到了ideal viewport吗/事实证明，的确是这样的：
测试结果表明initial-scale=1也能把当前的viewport宽度编程ideal viewport的宽度，但这次轮到了windows phone上的ID，无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。

但如果width和initial-scale=1同时出现，并且还出现冲突呢？

比如：