- physical pixel 物理像素值375*667 750*1334 当前浏览器的宽度
document.documentElement.clientWidth document.documentElement.clientHeight
- device-independent pixel 设备独立像素值 px
- device pixel ratio 设备像素比 2 window.devicePixelRatio
- PPI 每英寸的像素值 当PPI大于300为高清屏 PPI=(物理像素宽750*物理像素宽750+物理像素高1334*物理像素高1334)开根 再除以英寸(5.5)
iPhone6 plus屏幕像素值750 = 当前浏览器宽度 375* 设备像素比2
viewport
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
width : 设置layout viewport 宽度,值为一个正整数,或字符串"width-device"
height:设置layout viewport 高度,这个属性很少使用
initial-scale:设置页面初始缩放值,值为一个数字,可以是小数
minimum-scale : 设置页面最小缩放值,值为一个数字,可以是小数
maximum-scale : 设置页面最大缩放值,值为一个数字,可以是小数
user-scalable : 是否允许用户进行缩放,值为"no"或"yes"
1REM = 32px
此时EM=24px
VW是此时浏览器可视区域宽度的1%:
同理,VH就是高度的1%: