当设计者设计网页的时候，会按照固定的宽度设计，比如pc端1000像素或者1200像素等，在移动端640像素或者750像素，当转换到pc端的时候可能也会满足不了页面需求，可能会显示不完整，设备宽度远远不够。
为了弥补这一点，移动设备上浏览器会把视口放大，一般是980像素或者1024像素。但这样带来的后果是浏览器出现横向滚动条，因为设备实际可视区域比浏览器自设的宽度要小很多。
为了解决这一问题，引入了Viewport属性。viewport属性通过一个meta标签引入，实例如下：
<meta name = " viewport" content = "width = device-width,innital-scale=1.0,user-scalable = 0">
即：让当前viewport的宽度等与设备的宽度，同时不允许用户手动缩放。
视口是指不包括浏览器外壳（如标签页、书签栏、调试工具等）的窗口，也就是文档内容的可视区域。
vieport目的：让HTML文档在小尺寸屏幕上正确显示。属性值可包含多个键值对，如下：
|关键字 | 描述 | 值
|width|视口的宽度|device-width（设备宽度）或确切的像素数
|initial-scale |视口初始缩放级别| 0~10之间的正数，1表示无缩放，值越小页面越精细
|minimum-scale|视口能缩放的最小值|0~10之间的正数
|maximum-scale|视口能缩放的最大值|0~10之间的正数
| user-scalable| 用户是否可以手动缩放 |yes/no