一、逻辑像素(css像素)与物理像素(设备像素)
机型
逻辑像素
物理像素
Scale Factor
iphone 3GS
320 x 480
320 x 480
1x
iphone 4
320 x 480
640 x 960
2x
iphone 4S
320 x 480
640 x 960
2x
iphone 5
320 x 568
640 x 1136
2x
iphone 5C
320 x 568
640 x 1136
2x
iphone 5S
320 x 568
640 x 1136
2x
iphone 5SE
320 x 568
640 x 1136
2x
iphone 6
375 x 667
750 x 1134
2x
iphone 6P
414 x 736
1080 x 1920
2.6x
iphone 6S
375 x 667
750 x 1134
2x
iphone 6SP
414 x 736
1080 x 1920
2.6x
iphone 7
375 x 667
750 x 1134
2x
iphone 7P
414 x 736
1080 x 1920
2.6x
设备像素：设备硬件的物理像素
逻辑像素：软件所支持的像素
dpr(Device Pixel Ratio: Number of device pixels per CSS Pixel): 设备像素比
也叫dppx 就是一个css像素控制几个物理像素，物理分辨率/逻辑分辨率(css分辨率)= dpr
iphone 3GS，可以看到一个逻辑像素是由一个物理像素构成，随着技术发展出现了Retina屏使得设备分辨率提高一倍，一个逻辑像素可以由 (640/320)* (960/480) = 4个物理像素构成，这样屏幕看起来更清晰
二、三种viewport
1.the visual viewport
the visual viewport是在屏幕上显示页面的一部分，用户可以滚动以更改他看到的页面部分，或者缩放以更改可视视口的大小
the visual viewport的大小等于window.innerWidth/Height
2.the layout viewport
css布局尤其是百分比宽是相对于the layout viewport来计算的，the layout viewport比the visual viewport宽的多。
浏览器会控制layout viewport尺寸使其在完全缩小的情况下覆盖整个屏幕，这时the visual viewport=the layout viewport
因此，the layout viewport的宽度和高度等于在最大缩小模式下可以在屏幕上显示的任何宽度和高度。当用户放大这些尺寸时保持不变。
the layout viewport的大小等于document.documentElement.clientWidth/Height
3. the ideal viewport
它为每个设备上的web页面提供了一个理想尺寸，每个设备的理想尺寸都会不同。在非Retina屏的时代，the ideal viewport等于物理像素数，但这不是必须的。具有高物理像素密度的新型设备任然保留了原有的ideal viewport，因为它非常适合设备。
4S以上版本包含4S，iPhone理想的视口是320x480，无论它是否有视网膜屏幕。那是因为320x480是这些iPhone上web页面的理想尺寸。
关于ideal viewport有两点很关键：
the layout viewport可以被设置成the ideal viewport，使用meta标签的The width=device-
最低0.47元/天 解锁文章
3690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
