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同等物理大小,不规范