移动Web开发基础-Viewport

导语：移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思为视图窗口，在移动设备上就是指用来显示页面的那部分区域。

用移动设备来访问没有做特殊处理的PC页面，移动设备是显示不下那么宽的内容的，所以移动设备一般会将页面缩小来显示整个页面，用户可以将页面放在来看清楚内容，在做移动Web开发的时候，我们可以手动的设置页面的视窗宽度，页面缩放比例以及是否允许用户缩放等，那具体我们该怎么设置Viewport呢？我们先来了解移动Web开发的其他几个概念。

设备像素

对于设备来说，有两个设备像素：物理像素和独立像素。

物理像素：

设备的物理像素是指在设备屏幕上显示的最小的单元，也就是屏幕分辨率，比如iPhone 6的分辨率是750像素*1334像素。每个物理像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

独立像素：

设备独立像素又称CSS像素，这是一个抽象的概念，是指Web编程中的逻辑像素。如iPhone 6的CSS像素是375像素*667像素，可以看出来，这刚好是物理像素的一半，他们之间的关系后面会讲到。也就是说，如果我们在css代码中设置某个div的宽度为375px，在iPhone 6竖屏情况下，刚好能占满屏幕宽度。

像素密度（PPI）

每英寸像素（英语：Pixels Per Inch，缩写：PPI），又被称为像素密度，是一个表示打印图像或显示器单位面积上像素数量的指数。一般用来计量电脑显示器，电视机和手持电子设备屏幕的精细程度。通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。
有研究表明，人类肉眼能够分辨的最高像素点密度是300每英寸像素。[1]超过300每英寸像素的屏幕被常常称为Retina显示屏，这个概念最早由苹果公司于2010年推出iPhone 4手机的时候提出。

屏幕PPI计算公式：
要计算显示器的每英寸像素值，首先要确定屏幕的尺寸和分辨率。

其中，

dp为屏幕对角线的分辨率
wp为屏幕横向分辨率
hp为屏幕纵向分辨率
di为屏幕对角线的长度(单位为英寸)

以屏幕尺寸为4吋的iPhone 5为例，分辨率为1136x640，像素密度为326PPI。而分辨率为1920x1080的家用21.5寸显示器，像素密度为103PPI。

看一下不同PPI的设备显示效果：

iPhone 3GS (160每英寸像素，MDPI) 和 iPhone 4 (326每英寸像素，XHDPI)

除此之外，我们还可以通过下面的设备像素比（dpr）来判断是不是Retina显示屏。

设备像素比（DPR）

设备像素比(Device Pixel Ratio 简称：DPR)，是指物理像素和CSS像素的比例。

设备像素比（DPR） = 物理像素个数 / CSS像素个数 （计算公式，前提是缩放比为1）

对于一般的显示屏设备来说，DPR一般为1：1，但是在Retina屏幕设备中，DPR一般都是大于1：1的，以DPR为2的 iPhone 6 为例。

这也就是为什么我们的设计稿一般按手机物理像素的两倍来做的原因，我们移动端的图片也都是按两倍屏或三倍屏要处理，因为如果按一倍来处理的话，我们的图片在手机设备上相当于放大到了两倍，会造成图片的模糊。

目前市场中智能手机的DPR一般都是2或者3，对于iPhone手机来说比较明确，但是对于Android设备，目前各大手机厂商还没有得到很好的统一，有比较多样的比例。

关于设备屏幕的一些信息，可以通过 http://screensiz.es 这个网站来查看，也可以通过 https://material.io/devices/ 来查看自己的设备屏幕信息，扫码更方便。

视口

布局视口（Layout Viewport）

在PC浏览器中，视口只有一个，并且视口的宽度 = 浏览器窗口的宽度。在移动端，视口和浏览器窗口将不再关联，布局视口要比浏览器窗口大的多。布局视口是移动端CSS布局的依据，即CSS布局会根据布局视口来计算。
JS可以通过document.documentElement.clientWidth来获取宽度。

视觉视口（Visual Viewport）

用户正在看到网站的区域。
JS可以通过window.innerWidth来获取宽度。

理想视口（Ideal Viewport）

布局视口的宽度一般在 680~1024像素之间，这样可以使得PC网站在手机中不被压扁，但是这并不理想，因为手机更适合窄的网站，换句话说，布局视口并不是最理想的宽度。

理想视口，定义了理想视口的宽度，比如对于iphone6来讲，理想视口是375*667px。但是最终作用的还是布局视口，因为我们的css是依据布局视口计算的，所以可以这样理解理想视口：理想的布局视口。

我们可以通过设置Viewport的width= device-width 就可以将 Layout Viewport 的宽度设置为 Ideal Viewport 的宽度，还有通过设置initial-scale=1.0也同样可以实现效果，因为缩放是以 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的毛病：

设置Viewport

上面说了，要想我们的网站在手机那么小的设备上也能正常查看，我们通常将布局视口的宽度设置为理想视口的宽度，也就是width= device-width，完整的Viewport设置如下：

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

device-width - 设备的宽度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

这些值都可以通过JS的脚本注入到html中，所以后面还会讲基于此的一些适配解决方案。

关于缩放以及initial-scale的默认值

首先我们先来讨论一下缩放的问题，前面已经提到过，缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是320px，如果我们设置 initial-scale=2 ，此时viewport的宽度会变为只有160px了，这也好理解，放大了一倍嘛，就是原来1px的东西变成2px了，但是1px变为2px并不是把原来的320px变为640px了，而是在实际宽度不变的情况下，1px变得跟原来的2px的长度一样了，所以放大2倍后原来需要320px才能填满的宽度现在只需要160px就做到了。因此，我们可以得出一个公式：

visual viewport宽度 = ideal viewport宽度  / 当前缩放值当前缩放值 = ideal viewport宽度  / 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默认值。

我们经常会看到一个现象，用移动设备看PC页面，基本上设备都会帮我们缩放页面把内容全部展示，但是我们的PC页面有980或者1200或者其他的大小的，为了全部展示，所以设备对页面的缩放是动态的，不同的页面，不同的设备，缩放值都不会一样，也就是默认值是不确定的。

根据测试，我们可以在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.《指尖上行移动开发进阶之路》
2.一篇真正教会你开发移动端页面的文章(一)
3.移动前端开发之viewport的深入理解