在开发响应式网站时Wangcch’s CV，并未在移动窗口进行测试。结果在服务器部署测试时手机并没有自适应窗口，只是显示网页缩放版本。后来查资料，一行代码解决…
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
viewport概念
viewport:视口，视觉窗口，显示区域。viewport是用户网页的可视区域。手机浏览器是把页面放在一个虚拟的"窗口”（viewport）中，通常这个虚拟的"窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
-
layout viewport(布局视口) 一般为移动设备浏览器默认设置了一个viewport原标签，定义一个虚拟的layout view(布局视口)，使pc上面的网页基本能在手机上呈现，一般模式支持手动缩放网页。
-
visual viewport(视觉视口) visual viewport（视觉视口）备物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。
-
ideal viewpore(理想视口) ideal viewport（理想视口）通常是屏幕分辨率. dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。页面通过逻辑像素显示。 逻辑像素宽度*倍率 = 物理像素宽度 不同设备的倍率一般不同，更多设备ideal viewport可以查看viewportsizes
CSS像素
CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素）。
利用meta标签对viewport进行控制
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
| 属性名 | 取值 | 描述 |
|---|---|---|
| width | 正整数 或 device-width | 定义视口窗口的宽度，单位为像素 |
| height | 正整数 或 device-height | 定义视口的高度，单位为像素，一般不用 |
| initial-scale | [0.0-10.0] | 定义初始缩放值 |
| minimum-scale | [0.0-10.0] | 定义缩小最小比例，它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义放大最大比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes/no | 定义是否允许用户手动缩放页面，默认值yes |
设置viewport布局视口，宽度为设备宽度，禁止用户缩放，默认显示无缩放显示（即为1.0倍数）。
感谢:)