关于移动端开发的一些总结
1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示? iphone5分辨率640*1136 逻辑像素与物理像素的关系 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、 viewport 手机浏览器默认为我们做了两件事情: ① 页面渲染在一个980px(ios)的viewport ② 缩放 为什么要有viewport? 一个300多像素的屏幕,放一个1000多像素的页面,会混乱,所以要先虚拟一个980像素的页面,然后进行缩放。 度量|视口 visual viewport ==== 窗口缩放scale 布局 layout viewport 设计移动web