Viewport是HTML5为移动端开发添加的元属性。它的作用是为同一个网页在不同设备上的呈现提供一个响应式的解决方案。本文试图通过循序渐进的方式，层层探索Viewport的设计原则，希望能给读者带来更清晰、更全面的技术理解。1.简介在PC时代，我们使用css设置一个1px的边框，显示器会使用1个物理像素进行渲染。进入移动应用时代后，我们原本设置一个1px的边框，在手机上可能需要用2、3个物理像素来渲染。那么为什么手机会这样做呢？它解决了什么问题？而我们在开发过程中需要做什么呢？下面，我们将带着这些问题，一步步探究移动Viewport的设计原则，以及如何使用Viewport进行移动适配。二、基本概念1、屏幕尺寸屏幕尺寸是指手机屏幕对角线的长度。知道了屏幕的宽（width）和高（height），就可以通过勾股定理计算出对角线的长度：对角线就是屏幕对角线的长度，单位是毫米（mm），那么这个长度就是换算成“英寸（inch）”，也就是我们通常所说的手机尺寸。1英寸等于25.4mm，即例如iPhone的尺寸有3.5英寸、4英寸、4.7英寸、5.5英寸。这就是它的计算方式。2、物理像素我们在手机屏幕上看到的画面，本质上是由一个个发光的物理像素组成的。物理像素是构成屏幕图像的最小单位。我们常说的屏幕分辨率是指这个屏幕上有多少个物理像素。例如：iPhone4的分辨率为640×960，即屏幕水平方向有640像素，垂直方向有960像素。通常，设计师给出的UI设计稿上的“px”指的是物理像素。3.像素密度——PPIPPI（PixelPerInchbydiagonal）：表示对角线上每英寸的像素数。计算PPI可以用勾股定理计算出对角线上的像素点数，然后除以屏幕尺寸，即：将iPhone4屏幕数据代入公式，可以得到iPhone4的PPI：PPI的值越大，屏幕每英寸的物理像素越多越密集，渲染出来的画面越细腻清晰。例如，iPhone3GS和iPhone4的屏幕尺寸相同。但是前者的分辨率是320*480，PPI可以计算为163，而后者的分辨率是640*960，PPI是326，这导致iPhone4比iPhone3GS更清晰细腻图片演示。4、PPI引起的问题我们先看看下面两张图有什么区别？很详细，左图比右图看着舒服。左图字体大小适中，可以清晰阅读图片中的文字。相比较而言，右图的字体太小，导致用户阅读困难。那么，这个问题是怎么产生的呢？为了弄清楚这个问题，我们先来做个对比实验，如下图：左图和右图分别代表两个相同尺寸的屏幕，长宽各为5cm，屏幕上的每个方格代表一个物理像素。唯一的区别是左侧屏幕的分辨率为5×5，而右侧屏幕的分辨率为10×10。现在屏幕上放置了一个按钮，宽度为3px，高度为1px。css样式如下：.button{width:3px;height:1px;}从图中可以看出，虽然我们设置了相同的样式，但是右屏的按钮要比左屏的按钮小很多。所以我们会发现，同样尺寸的屏幕，像素点越多，每个物理像素点看起来越小，导致渲染出来的图像也越小。也就是说，设置同样大小的样式，屏幕的PPI越大，渲染出来的图像越小。这其实是个问题。在移动应用时代，手机有各种尺寸和分辨率，导致不同的PPI。当我们在不同的设备上浏览网页时，会出现“大小不一”的效果，这违背了我们对css样式“所见即所得”的认知。为了使相同的元素在所有设备上看起来大小相同，设备制造商在屏幕上添加了一个“比例因子”。5.Scalingfactor——这里所谓的DPR的scalingfactor并不是缩放图像本身，而是用更多的物理像素去渲染同一个元素。如下图所示，同样大小的矩形元素（灰条）在第一屏渲染为8×1物理像素，在第二屏渲染为16×2物理像素。在这三个设备上，24×3的物理像素用于渲染。这样做的目的是让这个元素在不同的设备上看起来大小相同。从图中可以看出，屏幕的PPI越大，需要的物理像素就越多。如果以第一块屏幕为基准，三块屏幕对应的物理像素数可以用一个放大倍数来表示，即1x、2x、3x。通常，我们称这种放大倍数为“缩放因子”。比例因子是移动响应能力的关键因素。在软件开发过程中，我们所说的“DPR”其实就是指比例因子。DPR是“devicepixelratio”的缩写，即设备像素比。这里需要注意的是，DPR的大小并不是通过固定的公式计算出来的，而是厂家为屏幕设定的一个固定值。出厂时就确定了，它的大小不会随着程序的设置而改变。6.DPR与PPI的对应关系不同平台定义的DPR的基线PPI是不同的。由于第一代iPhone的PPI为163，Apple使用163作为缩放基准。在iPhone中，PPI=163是1x屏幕；PPI=326是2倍屏；PPI=401是3倍屏；PPI=458也是3倍屏，对应的DPR分别为1、2、3、3。Android屏幕的scalingbaselinePPI是160，所以PPI=160是1x屏幕，PPI=320是2x屏幕。可以看到，在Android上，DPR和PPI基本呈现出固定的关系，但以后出现的屏幕可能不会遵循这个规律。因此，就有了这样一个重要的结论：DPR与PPI呈正相关，但不成正比，我们无法通过具体的公式计算其值。7.逻辑像素和逻辑分辨率对于同一个元素，DPR越大，需要渲染的物理像素就越多。这是我们上面得出的结论。那么，在软件开发中，元素大小应该写成多少px呢？为了解决这个问题，我们引入了“逻辑像素”的概念。我们通常在css中写的px指的是逻辑像素，而不是物理像素。一个逻辑像素可以表示一个或多个物理像素。假设我们现在设置一个元素的css样式如下：.el{width:8px;height:1px;}然后，这个元素在不同的屏幕上呈现不同： dpr=1，1个逻辑像素对应1个物理像素。当dpr=2时，1个逻辑像素对应2个物理像素，保证元素大小。当dpr=3时，1个逻辑像素对应3个物理像素，保证元素大小。因此，我们可以得出一个结论：一个逻辑像素所代表的物理像素数量与屏幕的DPR成正比。即：逻辑像素=物理像素/DPR通过这个公式，我们可以推导出屏幕的逻辑分辨率，也就是屏幕的逻辑宽度和逻辑高度。逻辑宽度=水平物理像素/DPR逻辑高度=垂直物理像素/DPR例如iPhone6的物理分辨率为750×1334，DPR=2，代入公式得到其逻辑分辨率：//逻辑宽度width=750/2=375px//逻辑高度height=1334/2=667px因此，iPhone6的逻辑分辨率为375×667。在JavaScript中，也可以通过DOMAPI获取屏幕的逻辑分辨率：//iPhone6window.screen.width;//375px;窗口.屏幕.高度；//667px;通常，我们在CSS中设置的元素大小，本质上是根据逻辑分辨率进行布局。8.iPhone3.Viewport1.常用规格究竟什么是视口？我们在写H5页面的时候，通常会在html的head中加上下面这句话：这句话是设置页面的viewport。那么到底什么是视口呢？为什么要设置？简单来说：视口是屏幕后面的画布。下面，我们将一一了解视口中的各个概念。2、Viewport画布浏览器会先在画布上绘制页面内容，然后通过screen窗口呈现出来。画布的宽度可大可小。当画布的宽度大于屏幕的宽度时，画布上的所有内容都无法显示在屏幕上。用户可以使用屏幕手势拖动画布来查看被遮挡的部分。如果html中没有viewport设置，canvas是真实存在的，浏览器会为canvas设置一个默认宽度。不同平台的默认值如下：canvas的宽度可以通过DOMAPI获取：3.device-width指的是什么device-width指的是水平方向的逻辑像素屏幕的可见窗口。device-width的大小可以通过window.screen.width获取：4.设置width=device-width是谁的width？width指的是画布的宽度，device-width是可见窗口的宽度。width=device-width是将画布的宽度设置为可见窗口的宽度，这样画布上的内容就可以完整的呈现出来。设置width=device-width后，canvas的宽度和屏幕的宽度一样大。5.Canvasscaling-scale是指canvas基于device-width大小的缩放值。initial-scale=1.0相当于设置width=device-width。通常，这两个值需要同时设置。这是因为两者在不同平台上存在兼容性问题：在iPhone和iPad上，只支持inital-scale=。1，但是IE只支持width=device-width，所以同时设置两者可以兼容所有平台。6.动态缩放机制如果页面没有设置视口，当画布的宽度大于可见窗口时，浏览器会自动缩放画布以适应可见窗口的大小。这样页面就可以在不滚动的情况下渲染所有内容。以下页面为未进行手机端适配的PC端页面。可以看到网页内容还是可以完整呈现的。这是因为画布的动态缩放机制是在没有设置视口的情况下触发的。通过DOMAPI可以计算出浏览器确实对画布进行了缩放：需要注意的是，浏览器的动态缩放机制只有在未设置视口或设置了视口但未设置比例时才会触发。7、禁止动态缩放，在页面中添加视口设置，如下图：由于缩放值是手动设置的，不会触发自动缩放机制，浏览器直接原封不动地显示宽度为980px的画布：本例需要滚动才能查看画布的全部内容。8.三个视口通常，我们称画布为布局视口，屏幕可见窗口为可视视口。而width=device-width的画布称为idealviewport，即“理想视口”。我们通常在html中设置视口，得到一个理想的视口，方便用户阅读。4.响应式布局方案响应式布局的目标是使用同一套代码来适配所有设备。常用的布局方案如下：百分比vwCssMediaQueryremflexbox下面是手淘团队适配的协作模式：设计师一般使用iPhone6（750px）作为设计稿，设计稿中的元素也是基于750px进行标注，当然这里的px指的是物理像素。开发者拿到设计稿后，根据iPhone6的dpr，将label中元素的大小转换为css中的大小。比如设计稿中按钮的宽度标注为40px，那么css应该写成40/2=20px然后根据屏幕大小逻辑宽度同步缩放（例如：rem/vw方案），所有设备都可以向上或向下适配。五、小结最后，我们来回顾一下开头提到的问题。其实不难理解，这是由于屏幕dpr不同造成的。一般来说，PC屏幕的dpr为1，即1个逻辑像素=1个物理像素，而移动端的dpr通常为2或3，所以需要2或3个物理像素进行渲染。这也是“移动端1px边框”的经典问题。了解视口后，这个问题就不难解决了。
