一、像素的概念
- px ：逻辑像素 ，浏览器使用的抽象单位
- dp、pt：物理像素
- dpr：设备像素缩放比
- ppi：屏幕每英寸的像素数量，即单位英寸内的像素密度
| ppi | 120 | 160 | 240 | 320 |
|---|---|---|---|---|
| dpr | 0.75 | 1.0 | 1.5 | 2.0 |
ppi 越高，像素数越高，图像越清晰。
Retina屏即高清屏，dpr 大于等于 2。
二、viewport
web初期，网页渲染在手机上，会只显示页面的其中一部分。用户需要通过滑动屏幕才能查看网页的全貌。由于用户体验太差，于是浏览器商就引入了 viewport 的概念。
2.1 手机浏览器的默认行为
- 页面默认先渲染在一个980px（ios）或其他的 viewport 里面
- 通过缩放，让用户能看到网页的全貌
为什么渲染时，要加入 viewport ？
直接渲染在小屏幕会导致排版布局等的混乱
2.2 viewport 的概念
两个 viewport ：视口（visual） viewport 和布局（layout） viewport
- 视口 viewport 就是用户查看网页的视口（可以理解为屏幕），可以通过缩放来改变其大小
- 布局 viewport 就是网页渲染的一个底层页面，ios 默认 viewport 为980 px 指的就是布局 viewport
通过调用
document.body.clientWidth查看默认布局Viewport
window.innerWidth查看度量Viewport
2.3 不使用默认布局 viewport 的原因
- 不同设备的默认值不同，宽度不可控制
- 缩放后连接可能因为太小不能准确触控，又有滚动，交互差
- font-size:40px=PC的12px，不规范
2.4 设置 viewport
在 html 中使用元标签meta设置 viewport：
<meta name='viewport' content='width=device-width,initial-scale=1,user-scalabel=no'>
相关参数
- width：设置布局viewport的值
- initial-scale：设置页面的初始缩放
- minimum-scale：最少缩放
- maximum-scale：最大缩放
- user-scalable：用户能否缩放
最佳设置
使视口 viewport = 设备宽度 = 布局 viewport
- width = device-width，让布局 viewport 等于设备宽度，也就是说，设置 320px 的元素会铺满 iphone5 的屏幕宽度。
- initial-scale = 1，设置初始缩放比为1，使得缩放比因为网页的大小而改变，让视口 viewport = 布局 viewport
- user-scalable = no，使得视口 viewport = 布局 viewport 保持不变
参考
慕课网教程：Hello，移动WEB
