viewport

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

　　css的1px相当于屏幕的1px，物理像素的1px相当于画布的1px，屏幕的分辨率越大，css的1px就代表个物理的1px就会越多，而我们想要的是在不同的设备上看到的文字、图片、按钮它们的视觉大小是一样的。

layout viewport：PC端网页初始的宽度，document.documentElement.clientWidth

visual viewport：移动端的可视宽度，window.innerWidth

ideal viewport：宽度等于visual viewport，自适应像素密度和视觉大小

meta标签：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

width=device-width：相当于layout viewport等于ideal viewport，也可以设置为正整数，就是宽固定，会在不同的设备中等比例缩放，但前提是不设置initial-scale=1，如果是设置了的话浏览器会取它们两个中宽度较大的那个值，并且不会等比例缩放

initial-scale=1：默认屏幕大小为100%，相对于 ideal viewport进行缩放100%

initial-scale=2：缩放2倍，并不是原来的320px变为640px，而是160px，因为原来的1px代表了缩放后的2px，所以160px就代表了320px，也就是visual viewport宽度=ideal viewport宽度/当前缩放值

minimum-scale=1：最小屏幕缩放100%

maximum-scale=1：最大屏幕缩放100%

user-scalable=no：不允许用户缩放