先来看看淘宝的viewport

    1. <meta name="viewport" 
    2.       content="width=device-width,
    3.                initial-scale=1,
    4.                minimum-scale=1,
    5.                maximum-scale=1,
    6.                user-scalable=no,
    7.                viewport-fit=cover">

    meta viewport是用来做移动端适配的，在移动端，页面在渲染时以layout viewport宽度作为计算标准, layout viewport（布局视窗）宽度默认值是设备厂家指定的，一般是980px，即如果不添加viewport, 页面默认宽度document.documentElement.clientWidth === 980

    如果不做移动端适配，看到的页面会很小，用户需要自己缩放和移动滚动条，体验极差
    meta viewport各属性的作用：

    • width属性被用来控制layout viewport（布局视窗）的宽度。width可以指定一个具体的数值，比如320, 或者设置为device-width，设置为设备屏幕分辨率的宽度。
    • initial-scale用于指定页面的第一次加载时的初始缩放比例，为一个数字(可以带小数)
    • maximum-scale用于指定页面能够放大的最大比例，为一个数字(可以带小数)
    • minimum-scale是用来指定页面能够缩小的最小比例，为一个数字(可以带小数)
    • user-scalable=no用来指定是否允许用户缩放， 值为no 或yes
    • viewport-fit=cover 将整个网站扩展到整个屏幕，应对刘海屏