viewPort 概念

分为 Layout viewportVisual viewportIdeal viewport 三类

移动端:
完美视口:scale=1,1*dpr物理像素=1css像素
yes,maximum-scale=1.0"/>
// 修改 layout viewport 尺寸
// 这里设置成 ideal viewport (理想视口)
// width 指定视口尺寸;
// device-width 是直接定的,使得尺寸跟看pc屏幕效果差不多scale是屏幕拉伸比。也就是视口上的initial-scale , maximum-sacle 等属性。

移动端没有指定 viewport meta 标签时,浏览器里面的 viewport 尺寸很大(不定),进行缩放时,Layout viewport 不变,visual viewport 变小。当 visual viewport 等于设备宽度(独立像素)时,开始改变 layout viewport

PC 下缩放跟指定了 viewport meta 宽度为设备宽度(独立像素)一样,会改变 layout viewport。


媒体查询,vw 等单位,事件对象中的基于页面的位置都是基于 Layout viewport

positon fixed 有些浏览器基于视觉视口(前段时间好像看到了讨论)