要在移动设备上重建或开发网页，首先要了解的是移动设备上的viewport。只有理解视口的概念和使用与视口相关的元标签，我们的网页才能适应或响应不同分辨率的移动设备。

一、视口的概念

一般来说，移动设备上的视口是设备屏幕上可以用来显示我们网页的区域。具体来说，它是浏览器(或应用程序中的webview)用于显示网页的部分。但是，视口不限于浏览器可视区域的大小，可视区域可以比浏览器可视区域大或小。默认情况下，一般来说，移动设备上的视口大于浏览器的可视区域。这是因为考虑到移动设备的分辨率与台式电脑相比相对较小，为了在移动设备上正常显示那些为桌面浏览器设计的传统网站，移动设备上的浏览器会将其默认视口设置为980px或1024px(或其他值，这由设备本身决定)，但结果是浏览器会有一个水平滚动条，因为浏览器可视区域的宽度小于默认视口的宽度。下图列出了某些设备上浏览器的默认视口宽度。

第二，css中的1px不等于设备的1px

在css中，我们通常使用px作为单位。在桌面浏览器中，css的一个像素往往对应着电脑屏幕的一个物理像素，这可能会让我们产生一种错觉，以为css中的像素就是设备的物理像素。然而，实际情况并非如此。css中的像素只是一个抽象单元。在不同的设备或不同的环境下，css中1px代表的设备的物理像素是不同的。在为桌面浏览器设计的网页中，我们不需要关心这个，但是在移动设备上，我们必须明白这一点。在早期的移动设备中，每英寸的屏幕像素相对较低，例如分辨率为320x480的iphone3。在iphone3上，css像素等于屏幕物理像素。后来随着技术的发展，移动设备的每英寸屏幕像素越来越高。从iphone4开始，苹果推出了所谓的Retina屏幕，它的分辨率提高了一倍，达到了640x960，但屏幕尺寸没有变化，这意味着相同尺寸的屏幕上有两倍的像素。此时，一个css像素等于两个物理像素。其他品牌的移动设备也是如此。例如，安卓设备可以分为不同的等级，如ldpi、mdpi、hdpi、xhdpi等。根据每英寸的屏幕像素，分辨率也是变化的。安卓设备上一个css像素相当于多少屏幕物理像素，因设备而异，目前还没有最终定论。

另一个会导致css中px变化的因素是用户缩放。比如用户将页面翻倍，css中1px代表的物理像素也会翻倍；相反，如果页面缩小一倍，css中1px代表的物理像素会缩小一倍。这一点将在本文后面讨论。

在移动浏览器和一些桌面浏览器中，窗口对象有一个devicePixelRatio属性，官方定义为设备物理像素与设备独立像素的比值，即devicePixelRatio=物理像素/独立像素。css中的Px可以看作是设备的一个独立像素，所以通过devicePixelRatio，我们可以知道一个css像素在设备上代表多少物理像素。例如，在带有Retina屏幕的iphone上，devicePixelRatio的值为2，这意味着1个css像素相当于2个物理像素。但是需要注意的是，devicePixelRatio在不同的浏览器中还是有一些兼容性的问题，所以我们还不能完全信任这个东西。详情请参考本文。

设备像素比率的测试结果：

三、PPK关于三视口的理论

Ppk对移动设备上的viewport做了大量的研究(第一、二、三篇文章)。感兴趣的同学可以看一下。本文的很多数据和观点都来自于此。根据ppk，移动设备上有三个视窗。

首先，移动设备上的浏览器认为，他们必须能够使所有网站正常显示，即使是那些不是为移动设备设计的网站。但是，如果将浏览器的可视区域作为视口，由于移动设备的屏幕不是很宽，当为桌面浏览器设计的网站在移动设备上显示时，会因为移动设备的视口太窄而挤在一起，甚至会打乱布局。有人可能会问，分辨率很大的手机不是很多吗，比如768x1024或者1080x1920，这样的手机显示专为桌面浏览器设计的网站没问题吗？正如我们前面所说，css中的1px并不代表屏幕上的1px。分辨率越高，css中1px表示的物理图像越大。