移动端app及web页面设计基础：像素密度（未完）

面对市场上各种不同的移动端尺寸及分辨率，在进行设计和开发移动端app或者web页面时，给我们带来很大的困扰，
android手机碎片化非常严重:
尺寸: 从最古老的3.X寸到目前主流的5.X寸及超大屏手机；
分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，1440x2560.

iPhone设备 尺寸 分辨率
iPhone 3和3s 3.5英寸 (320×480)
iPhone 4和4s 3.5英寸 (640×960)
iPhone 5和5s 4.0英寸 (640×1136)
iPhone 6 4.7英寸 (750×1334)
iPhone6 Plus 5.5英寸 (1080×1920)

难道要为每一种手机分辨率设计一套layout? – that’s impossible!
不管是设计人员还是移动端开发人员（native app/web app/web页面）都应该知道并且深刻理解“像素密度”这个概念。

具体的概念细节请参考下面两篇文章，写的非常到位：

1.iPhone屏幕尺寸、分辨率及适配；
2.移动端尺寸基础知识

看完上面两篇文章我相信大家对基本概念已经有了很清楚的理解，我下面着重说一下webapp及手机页面中如何使用逻辑像素进行布局，最实际的问题：如何写CSS代码。

首先参考下面文章：
在各种高分辨率设备中使用像素

我们现在做一个测试：分别在PC和手机上打印屏幕尺寸：

<script>document.write("屏幕宽度：" + screen.width + "; 屏幕高度" + screen.height);</script>

PC浏览器上运行结果是（我的电脑屏幕分辨率是1920*1080) ：屏幕宽度：1920; 屏幕高度1080
手机浏览器运行结果（红米note3 屏幕分辨率1920*1080）：屏幕宽度：360; 屏幕高度640
手机浏览器运行结果（iphone5 屏幕分辨率640*1136）：屏幕宽度：320; 屏幕高度568

由此可见， 在PC上，浏览器的window.screen分辨率就是实际的物理分辨率；但在手机上是逻辑分辨率！！

所以在移动端设计界面，不管是web页面还是webapp，CSS的尺寸都按照逻辑像素就可以了。

还有一个问题：安卓和iphone如何统一？
目前主流安卓手机的逻辑像素都是360*640；
iphone6 plus: 414*736;
iphone6 : 375*667;
iphone5(s): 320*568；
iphone4(s) : 320*480；