Ios尺寸表

1、 piexl 像素知識(shí)

邏輯像素與物理像素的關(guān)系

px邏輯像素：瀏覽器使用的抽象單位

dp，pt物理像素：設(shè)備無關(guān)像素

dpr：設(shè)備像素縮放比

計(jì)算公式：1px = (dpr)^2 * dp

iphone5的 dpr = 2；

DPI:打印機(jī)每英寸可以噴的墨汁點(diǎn)（印刷行業(yè)）

PPI:屏幕每英寸的像素?cái)?shù)量，即單位英寸內(nèi)的像素密度

目前，在計(jì)算機(jī)顯示設(shè)備參數(shù)描述上，二者意思一致

計(jì)算公式：以iphone5為例：ppi = √（1136^2 + 640^2）/4 = 326ppi（視網(wǎng)膜retina屏）

注意：?jiǎn)挝粸橛布袼兀ㄎ锢硐袼兀?，非px

PPI越高，像素?cái)?shù)越高，圖像越清晰。但可視度月低（小），系統(tǒng)默認(rèn)縮放比越大。

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

2、設(shè)備像素比dpr（devicePixelRatio）

window.devicePixelRatio是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。

window.devicePixelRatio =物理像素/ dips

3、viewport

手機(jī)瀏覽器默認(rèn)為我們做了兩件事情：

① 頁面渲染在一個(gè)980px（ios）的viewport

② 縮放

為什么要有viewport？

一個(gè)300多像素的屏幕，放一個(gè)1000多像素的頁面，會(huì)混亂，所以要先虛擬一個(gè)980像素的頁面，然后進(jìn)行縮放。

度量|視口 visual viewport ==== 窗口縮放scale

布局layout viewport

設(shè)計(jì)移動(dòng)web，為什么不使用默認(rèn)的980px的布局viewport？

① 寬度不可控制，不同系統(tǒng)的設(shè)備默認(rèn)值都可能不同

② 頁面縮小版顯示，交互不友好

③ 鏈接不可點(diǎn)

④ 有縮放，縮放后又有滾動(dòng)

font-size為40px等于pc上12px同等物理大小，不規(guī)范