media-像素与屏幕

Ios尺寸表

1、 piexl 像素知识

逻辑像素与物理像素的关系

px逻辑像素：浏览器使用的抽象单位

dp，pt物理像素：设备无关像素

dpr：设备像素缩放比

计算公式：1px = (dpr)^2 * dp

iphone5的 dpr = 2；

DPI:打印机每英寸可以喷的墨汁点（印刷行业）

PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度

目前，在计算机显示设备参数描述上，二者意思一致

计算公式：以iphone5为例：ppi = √（1136^2 + 640^2）/4 = 326ppi（视网膜retina屏）

注意：单位为硬件像素（物理像素），非px

PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。

retina屏（高清屏）：dpr都是>=2。

---

2、设备像素比dpr（devicePixelRatio）

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

window.devicePixelRatio =物理像素/ dips

3、viewport

手机浏览器默认为我们做了两件事情：

① 页面渲染在一个980px（ios）的viewport

② 缩放

---

为什么要有viewport？

一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。

度量|视口 visual viewport ==== 窗口缩放scale

布局layout viewport

设计移动web，为什么不使用默认的980px的布局viewport？

① 宽度不可控制，不同系统的设备默认值都可能不同

② 页面缩小版显示，交互不友好

③ 链接不可点

④ 有缩放，缩放后又有滚动

font-size为40px等于pc上12px同等物理大小，不规范