javascript - iphone5 4英寸的device-width= 320px

Question

请问已知iphone5：屏幕尺寸是4英寸，分辨率640×1136，326ppi
如何计算出css的device-with是320px？
不要说用js能检测。。。我只是好奇这个320px是怎么来的。

Answer 1

iPhone 5的像素密度是2(Retina Display)
iPhone 6的像素密度是3

所以实际像素要除以像素密度，iOS里面的单位是Point(点)

Answer 2

第一代iphone的时候，分辨率为320480，屏幕尺寸为3.5寸（注意，这个3.5寸说的是屏幕的对角线宽），这时候device-width就是320px，也是手机的分辨率宽，此时device-width就是设备宽。但第二代的iphone分辨率提高为了480960，屏幕尺寸为依然为3.5寸，如果device-width还是设备宽，那么同样是320px的页面放480*960的手机屏上，图文就会变得比较小，又会影响其可读性。因此iphone的device-width一直维持在320px，ipad一直维持在1024px。这个时候，device-width就不是设备宽了（也就不是分辨率的宽了），是一个中间层。Android采用的也是这一概念，其device-width值以360居多，但也不乏有像540px和600px这样的奇葩。在设置了<meta />标签以后，device-width值可以用window.innerWidth来获取device-width值。