Viewport的一些理解

布局视口

布局视口是页面渲染时虚拟的一个页面,它是固定的大小

image.png

可视视口

可视视口是不断变化的,当缩放时,可视视口的大小将会不断变化

image.png

理想视口

理想视口就是布局视口在一个设备上的最佳尺寸

<meta name="viewport" content="width=device-width" />

布局视口的宽度和可视视口的宽度相等,那么这个布局视口将成为理想视口

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

最小,最大缩放比例,禁用用户缩放