文章标题

Viewport可视区域

浏览器默认的viewport是layout viewport ,可以通过document. documentElement . clientWidth获取。
浏览器可视区域大小是visual viewport，可通过Window.innerWidth获取（同样的PC端chrome下，visual viewport在不同的分辨率下是不同的）。
完美适配下的视窗ideal port（理想窗口），文字和图片在其中不大也不小。
移动设备的默认的viewport为来layout viewport，但是开发时有用的是ideal viewport.

让ideal viewport等于设备宽度的两种方法：
<meta name=”viewport” content=’width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0’>
<meta name=”viewport” content=’,initial-scale=1.0’>//本意是不允许缩放。理解：缩放即相对于ideal viewport进行缩放，为1时即为它本身

Css中的1px在桌面浏览器中是1px，但是在移动平台上并不一定是1个物理上的1px.css的像素数与对应的实际的物理像素数为device pixel ratio，它会随着屏幕分辨率越高而越大，当移动浏览器要显示一个桌面版的网页时，浏览器会把view port设置为一个较大的值。
当用户进行缩放时，每个css像素对应的物理像素数变大，但viewport内的css像素数减少，所以可视区域会减少，文字或图片会被放大。