移动 web 开发基础概念

物理像素

1. 分辨率
   1792 * 828 像素分辨率，指的是横向有 828 个点，纵向有 1792 个点。
2. 物理像素(physical pixel)
   上面所说的点就是一个物理像素
   也叫设备像素(dp: device pixel)

CSS 像素

1. CSS 像素
   也叫 逻辑像素(logical pixel)
   设备独立像素 (dip: device independent pixel)

2. 实际开发中使用的像素

3. 设备像素比 (dpr: device pixel ratio)
   dpr = 设备像素 / CSS像素（缩放比是1的情况下）
   dpr = 2 表示 1 个 css 像素用 2 * 2 个设备像素来绘制

4. 标清屏和高清屏
   标清手机屏 dpr = 1
   高清手机屏 dpr > 1

5. 缩放
   缩放改变的是 CSS 像素的大小

6. PPI

• 每英寸的物理像素点
• ppi：pixels per inch
• dpi: dots per inch

视口–viewport

1. 视口标准写法

<!--
width=device-width
视口宽度等于设备宽度
initial-scale=1
初始缩放比例为1
以上为页面显示视口配置，为了兼容性通常都写
user-scalable=no 
用户是否能够缩放，通常设置为 no
maxmum-scale=1
minmum-scale=1
最大缩放和最小缩放
以上设置均为禁止用户缩放，为了兼容性通常都写
-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">

2. js 获取视口宽度

var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;

screen.width 不要使用，因为有的设备返回的是物理像素

3. 获取 dpr

console.log(window.devicePixelRatio);