一直以来对HTML5页面在手机端的显示有些疑惑，今天刚好看到了CSS中的媒体查询方面的介绍。随便就了解到了 viewport（视口）这个概念。

在HTML5页面头部，我们一般会看到下面的这段声明代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

以上代码也是主要为了网页能在手机端能很好的适应。现在我们就了解下这句话如何作用网页的，以及这里的 viewport 是什么含义？

在了解这些之前，我们首先看下 CSS pixels 和 device pixels 的概念：

CSS pixels可以理解为css像素，是浏览器使用的抽象单位，主要用来在网页上绘制内容。也可以说css px是专门为web开发者提出的一个抽象概念，也只跟我们平时写的css样式有关，与分辨率（比如720px*1280px）里的px没关系。

device pixels可以理解为是设备像素，官方的解释是：显示屏幕的最小物理单位，每个dp包含自己的颜色、高宽等。

在PC端，浏览器缩放比例为100%，也即默认情况下，1 CSS pixel = 1 device pixel 。

但是这手机端，情况却就复杂的多！

Viewport起源于苹果，但现在已经被大多数浏览器支持。关于viewport有两个概念visual viewport跟layout viewport。这里visual viewport也就是视觉上的窗口，可以理解为设备自己的宽度。这时，如果你有一个长960的页面，有一个元素是20%（实际解析出来就是192px）。但如果我用宽为320px的屏幕打开呢，这个元素就成了64px，但是这个时候我设置的字体大小是12px，在320px的屏幕上就只能显示64/12个字了～

鉴于这个问题，苹果找到一种解决方法，在移动版的safari中定义了viewport meta标签，它的作用就是创建一个虚拟的窗口（viewport），这个虚拟的窗口就是layout viewport分辨率接近桌面显示器，apple将其定位为980px。在手机上，可以通过document.documentElement.clientWidth来获取。

其他浏览器厂商也有不同的解决办法，例如UCweb是使用的中间技术。

另外据说，不同浏览器厂商对于layout viewport的大小都有自己的定义。但是，我用手上不多的几个手机（小米2s、SONY、金立、ipad）测试的结果，都是980px。其中在小米2s上测试了小米自带浏览器、QQ浏览器、UC浏览器、谷歌浏览器，还有opera浏览器，结果都一样；其他的手机上面不管装了什么浏览器，都测试了，结果都是980px。但是这个值对于我们web开发来说，好像也没有什么用处。

因为大多数情况下，<meta name="viewport" content="width=device-width" /> 这个标签对我们来说是最给力的，可以让我们的页面里的图文显示的是正常的，很大程度上提高了页面的可读性。而这一meta标签的功能就是设置layout viewport为device-width的宽度。但是device-width具体是什么呢？

第一代iphone的时候，分辨率为320*480，屏幕尺寸为3.5寸（注意，这个3.5寸说的是屏幕的对角线宽），这时候device-width就是320px，也是手机的分辨率宽，此时device-width就是设备宽。但第二代的iphone分辨率提高为了480*960，屏幕尺寸为依然为3.5寸，如果device-width还是设备宽，那么同样是320px的页面放480*960的手机屏上，图文就会变得比较小，又会影响其可读性。因此iphone的device-width一直维持在320px，ipad一直维持在1024px。这个时候，device-width就不是设备宽了（也就不是分辨率的宽了），是一个中间层。Android采用的也是这一概念，其device-width值以360居多，但也不乏有像540px和600px这样的奇葩。在设置了<meta />标签以后，device-width值可以用window.innerWidth来获取device-width值。

这是iphone设备的viewport尺寸

• iPhone4~iPhone5S: 320*480px
• iPhone6~iPhone6S: 375*627px
• iPhone6 Plus~iPhone6S Plus: 414*736px

综上所述，一般我们在制作手机端的页面时，应该在页面头部声明那句代码，另外要注意设备的 viewport ，在制作页面时要注意控制网页的宽度问题。