什么是视口（viewport）？

视口（viewport），指的是浏览器窗口中用来显示网页的区域。 以浏览器来说，就是浏览器的窗口内容区域（除去标题栏，菜单栏，地址栏，状态栏等等浏览器的“周边”的东西）。 视口表现得像是之上的一个块元素，它限制并确定的宽度，但却不属于html结构，不能被设置样式。 而且，任何时候，视口的尺寸都会随着浏览器窗口的大小变化而变化。桌面电脑中的视口，就是这样的一个概念。

相比桌面电脑，在手机上浏览网页，最大的差异在于屏幕尺寸。 电脑端的页面到手机上，很容易出现水土不服（一些流体布局的网页会在过窄的视口中变得一团乱）， 为了让用户在手机上也获得最佳的网页浏览体验，应该让视口更宽，超越屏幕的宽度。 所以，在手机浏览器中，视口被划分为了两个：可见视口（visual viewport）和布局视口（layout viewport）。

• 可见视口是指当前在手机屏幕上显示的部分。
• 和可见视口不同，布局视口则是整个页面的窗口，用于元素布局和尺寸计算（比如百分比的宽度值），而且比可见视口明显要更宽。 无论你缩放，或者滑动页面，甚至翻转手机屏幕，布局视口始终不变。 布局视口的宽度是由手机浏览器定义的，随浏览器不同而不同。比如Safari是980px，Android Webkit是800px。这都远比屏幕宽度值要大。

手机中的布局视口是可以更改的。你一定在很多移动版网页中见到过下边这个标签元素。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这其中有一句width=device-width，它的意思是，把手机浏览器的布局视口的宽度，更改为当前设备的宽度，也就是等于可见视口。

逻辑像素才是px，设备像素是dp。我们得知iphone5的尺寸为4英寸，设备分辨率为640dp1136dp，手机基本上都是视网膜屏，dpr=2。 那么逻辑像素就是320px568px。

但设置width=device-width后，ios中默认的布局viewport是980px。

• Visual ViewPort（可视窗口）就是手机屏幕的可视区域，可以通过横竖滑动条或者放大缩小预览网页的窗口。 （其大小可通过window.innerWidth获取）
• Layout ViewPort（布局窗口）主要是用来展示原始页面，其窗口的分辨率跟PC显示器分辨率相接近。 （其初始页面宽度与不同设备浏览器相关，其大小可通过document.documentElement.clientWidth获取）

我们将Visual ViewPort放大到和Layout ViewPort相同的宽度。整个页面就可以显示在手机屏幕上了， 但是其实这还是有问题的（缩放到跟Layout ViewPort原始宽度一样的话，页面元素也会按照比例缩放导致文字看不清）。 因此还需要禁止其自动缩放，办法就是initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no

比如说ios中默认的布局viewport是980px，手机是640dp，dpr是2，逻辑像素320px，width=device-width后， 980px映射到320px，所以css中的320px只是屏幕上1/3不到。

那么我们怎么搞定设计图的尺寸与实际尺寸一致呢？这就需要换算了，设计图的宽度往往750px，转换参数是980/750就可以了。

如果不设置width=device-width，那么就没有映射，手机屏幕只显示原网页宽度的1/3不到。

• em，是一个相对单位。相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。即1em=16px。
• rem，是一个相对单位。是相对HTML根元素，通过rem既可以做到只修改根元素就可以成比例的调整所有字体。