移动web开发中viewport的理解

引言

在移动web开发中，首先必须要弄清楚的就是viewport的概念。不管对于web开发新手还是从事pc端web开发已久的开发者，viewport的概念和使用至关重要。
不过在深入解释viewport之前，我们先理清一些关于移动设备的概念，搞懂这些概念对于理解viewport非常有帮助。

移动设备的相关概念

• 分辨率
  分辨率是手机屏幕的像素点数，比如iphone 6s plus的屏幕分辨率为1920*1080，即屏幕中一列有1920个像素，一行有1080个像素。安卓手机常见的屏幕分辨率有800*480，1080*720，1920*1080等。移动设备的屏幕分辨率是非常多样的，总体发展趋势是屏幕分辨率越来越高。

• 屏幕尺寸
  屏幕尺寸是指手机对角线的物理尺寸，以英寸(inch)为单位。移动设备的屏幕尺寸也非常多样，从3.5寸到5.7寸（触屏手机）都有。

• 密度
  密度(dpi, dots per inch; 或ppi, pixels per inch)，表示没英寸的像素点数，数值越高显示越细腻。密度可以通过对角线的像素点数除以屏幕尺寸得到，它综合了屏幕分辨率和尺寸，是较为全面表现屏幕物理显示精细程度的概念。一般来说，安卓手机有下面几种密度类型（苹果有自己的称呼）：

密度 ldpi mdpi hdpi xhdpi xxhdpi 密度值 120 160 240 320 480

上表表示，120dpi及以下的屏幕属于低密度ldpi，120-160dpi的屏幕属于中密度mdpi，160-240dpi的屏幕属于高密度hdpi，240-320dpi的屏幕属于超高密度xhdpi，320-480dpi的屏幕属于超超高密度xxhdpi。
一般来说，320*240的屏幕是ldpi 120dpi，480*320的屏幕是mdpi 160dpi，800*480的屏幕是hdpi 240dpi，1080*720的屏幕是xhdpi，1920*1080的屏幕是xxhdpi。

• 设备独立像素
  设备独立像素(dip, device-independent pixel)，不管屏幕的密度是多少，屏幕上相同dip的元素看起来始终差不多大。设备独立像素是设备和浏览器抽象出来的概念，这么做的原因主要是为了克服分辨率、尺寸和密度过于分散（也叫碎片化）的缺点。这个概念可以看作与后面介绍的visual viewport是一样的。

• 设备像素比
  设备像素比(device pixel ratio)，表示设备上物理像素和设备独立像素的比例，即 屏幕分辨率 / 设备独立像素。

• css像素
  css像素是浏览器使用的抽象单位，用于网页上绘制内容的长度度量。css像素只跟我们写的css样式有关，与屏幕分辨率无关。

• visual viewport和layout viewport
  在浏览器中，visual viewport 是浏览器的可视区域，可以通过拖动或者放大缩小网页查看内容；layout viewport 是网页的所有内容的区域，通过 visual viewport 部分或者全部展示给用户。下面使用别人的图片说明 visual viewport 和 layout viewport 的区别。
  
  
  对于 visual viewport，当设置了viewport后（后面讲述怎么设置）， 这个概念相当于设备独立像素，不管手机的密度是多少，visual viewport 相同的话展示给用户内容大小也是相同的。比如苹果的iphone4, iphone4s, iphone5都是宽度为320的设备独立像素，虽然它们的屏幕分辨率不同，但是我们始终看到100 css px的图片显示出来相对于屏幕的大小是一样的。
  layout viewport 是针对css布局的，在不同的浏览器中其大小是不一样的，在移动设备中，safari浏览器layout viewport宽度为980px，opera为850px。当我们在移动设备中不使用viewport时，浏览器则会默认layout viewport为以上的值。
  可以看到，visual viewport是设备固定的，生产商设置，用户无法更改，而 layout viewport 则是用户可以设置的，用于网页中css布局。

viewport 最重要的应用

回到正题，viewport 的使用。viewport 并不是移动设备特有的，在pc端的浏览器也有，不过由于pc端中通常 layout viewport 与屏幕分辨率差不多，比如著名的960px布局等，网页布局都直接针对屏幕进行，因此 layout viewport 和 visual viewport 也就等同了。而在移动端，在上面的概念说明中，layout viewport 默认是浏览器设置的某个值（如980px），而直接布局的话，网页内容看起来都非常小，用户需要通过放大和滑动视口才能看到内容。要将内容显示大小适应屏幕，则应要 layout viewport 的大小等同于 visual viewport，这样布局的css px与在设备屏幕看到的内容也就按照visual viewport（设备独立像素）大小比例显示出来了（也有人将这个称作ideal viewport）。在html中，设置meta标签：

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

这样就使得 layout viewport 的大小和 visual viewport 一样了。
至于为什么这么设置，下面详细说明 viewport 的属性

viewport的属性

通常，viewport 有以下几种属性，有一些浏览器可能会有自己的新属性。

属性 值 描述 width 正整数或device-width 定义视口的宽度，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素 initial-scale [0.0, 1.0] 定义初始缩放值 minimum-scale [0.0, 1.0] 定义缩小比例的最小值 maximum-scale [0.0, 1.0] 定义放大比例的最大值 user-scalable yes/no 是否允许用户手动缩放页面，默认为yes

上面说到的定义width=device-width，就是使得布局的 layout viewport 的宽度等于设备的宽度，这样用户不通过缩放也可以得到很好的阅读浏览效果。另外通过设置initial-scale=1.0其实也是可以达到相同的效果的。理解了一开始介绍的概念，这些属性其实相对来说就非常容易理解了。
另外需要注意的是，设置 width=device-width 后，布局和视口的宽度就按照 visual viewport（设备独立像素dip） 的宽度进行了，这个值并不是分辨率或者 layout viewport 的原始默认值。这个值是由手机设备商确定的，苹果基本上是320px（iphone6s 起比这个更宽），安卓就非常多样了，基本上320px以上的都有。从这里看到屏幕碎片化真是非常严重了，前端攻城狮面临挑战巨大，在实际开发中，屏幕的问题会对开发者带来不少的问题。

更多权威参考请看：apple developer