移动web

发表于

iphone5为例：

  1. 说的640dp*1136dp指的是物理像素，而实际上实际开发用的是逻辑像素（px，浏览器使用的抽象单位）
  2. dp，pt：设备无关像素，是固定的，不像逻辑像素可大可小。

这两者的关系是用dpr：设备像素缩放比

1px = (dpr)平方*dp

以dpr=2举例：

平面上：1px = 4dp

长度来说：1px = 2dp

所以，iphone5声称的640dp*1136dp也就是实际开发的320px*568px

dpi & ppi

dpi：打印机每英寸可以喷的墨汁点

ppi：屏幕每英寸内有多少像素渲染，也就是单位英寸内的像素密度

以iPhone 5为例，需要用物理像素去算

ppi=[（1136² + 640²）/4 (英寸) ]开方 = 326ppi (视网膜retina屏幕，dpr大于 等于2)

ppi越高，像素数越高，图像越清晰（图像有更多的像素去渲染）

viewport

iOS：viewport是980px（在980px的视口上渲染无误，在移动端缩放）

Android：不确定，可能是1640,1200？

  1. layout viewport：布局viewport，980px
  2. visual viewport：度量viewport，缩放后的网页宽度

meta标签

1
2
document.body.clientWidth：布局viewport    //书的大小
window.innerWidth：度量viewport  缩放后大小：当前屏幕可视区域下展示了多少像素 放大镜

div：320*568px， 默认viewport是980px，也就是320布局在980的页面上，只能显示一部分

最佳：

1
<meta name="viewport" content="width=device-width，initial-scale=1，user-scalable = no">

width=device-width 布局viewport=设备宽度

initial-scale=1 度量viewport = 布局viewport

document.body.clientWidth：320
window.innerWidth：320