移动端开发学习1：viewport

前言

时间：2015-11-18

在当今手机端流量占了半壁江山的时代，让网页适配移动端也是前端开发者需要下功夫的地方，了解viewport是基本要求。

1. 什么是viewport ?

viewport的概念最早是由Safari浏览器提出来的，viewport可以看作是一个虚拟的窗口，开发者可以改变其属性来控制这个窗口。

在PC上，我们可以使用鼠标，任意的改变窗口的大小，也可以使用浏览器右边的滚动条来拖动页面。然而，在手机浏览器里，我们只能使用手指来点击或者滑动，例如双击来放大，两个手指合并来缩小等等。

手机端和PC端viewport的区别：

• PC端：

  PC端 viewport 就是在用户在浏览器中能够看到的地方(即浏览器窗口的可视区域)。 如果页面超过了这个窗口，就会显示出滚动条，用户可以使用滚动条来改变viewport，以获得更多的内容。

• 手机端：

  与PC端的viewport不同， 手机端viewport是指整个网页内容。没错，就是说手机屏幕的可视区域的大小并不是这里所说的viewport的大小，viewport可能大于手机的可视区域(页面宽度大于手机屏幕宽度)，也有可能小于手机的可视区域。

2. 为什么要使用viewport ?

先介绍两个概念： CSS px 与 device px

• CSS px 是虚拟的，可以根据环境来匹配真实像素

• device px 是物理上真是存在的

前面介绍了viewport的简单概念，那么为什么要剔除这个概念，或者说这个viewport在手机上解决了什么问题呢？

这个问题来源于手机的快速发展，在早起，手机的分辨率低于或者等于PC的分辨率，并没有超过320PPI(即视网膜屏)的手机，现在(2015年)基本手机都达到了或者超过了这个水平。

以三星S4 为例，分辨率为1920 * 1080，441PPI，而我的PC显示器是1440 * 900 的分辨率。也就是说，同样200px * 200px 的div在电脑里显示我们能看的清，但是在手机中由于屏幕小，自然就把这个div给压缩了。相当于把你的显示器给压缩成手机大小，里面显示的内容也等比例压缩了，这样对于在手机端浏览页面非常费劲，字太小，每次都要缩放，移动，缩放，再移动。

3. viewport如何使用

下面是name＝”viewport” 时的 content 可以使用的值

Value	可能的取值	描述
width	一个正整数像素值(不用加px)或者 device-width	定义虚拟viewport的像素宽度
height	一个正整数像素值(不用加px)或者 device-height	定义虚拟viewport的像素宽度
initial-scale	0.0 - 10.0	定义初始加载时设备宽度与viewport的缩放比
maximum-scale	0.0 - 10.0	定义用户允许的最大缩放比
minimum-scale	0.0 - 10.0	定义用户允许的最大缩放比
user-scale	yes / no	默认为yes，允许用户缩放

现在1080P的手机几乎占满了市场，在1080P的手机上， 使用initial-scale ＝ 1，设备像素比(可以通过window.devicePixelRatio 来查看当前的设备像素比)是3 : 1，一个CSS像素表示了9个物理像素。
依据是公式： 1 个 CSS 像素 ＝ （devicePixelRatio）^2 个实际像素

720P的devicePixelRatio为 2

通过使用这种viewport的缩放， 让1080P的手机可以当作360P的手机来解析，720P的手机看做 360P的手机，都能按可接受的大小来展示页面。

4. 相关链接

• Safari Viewport文档

• mdn 中关于viewport的文档