我正在为移动网络应用编写css。 因为我意识到iphone4屏幕的宽度应该是640px。 我从浏览器获得的结果虽然表明屏幕是 320像素。例如，如果我使用160px的div，则占据半屏。 我的问题是移动应用程序是我必须设计的尺寸？
答案 0 :(得分：2)
不要为尺寸设计。
如果你这样做，你会让自己疯狂。为什么呢？哪一个更大 - 一台iPad或台式机显示器？可能不是你期待的那个。最新的iPad时钟频率为2048x1536，可以说比许多桌面显示器要大。
此外，正如您现在所看到的，众所周知，设备会对其分辨率“撒谎”。这与像素密度和设备像素（历史上，显示器中的物理片段）和CSS像素（测量单位）之间的差异有关。
此外，根据您使用媒体查询更改的内容，您可能会收到意外结果。例如，Kindle Touch报告的分辨率与同代iPad相同，但其基本字体大小为20px，而不是通常的16px。这可能会给您的设计带来灾难，特别是如果您使用的是基于em的字体。然后，还有一个事实是移动设备不是那里唯一的非桌面屏幕。投影仪怎么样？它们通常以1024x768或更高的分辨率运行，但由于观看距离有多远，它们通常更适合使用“移动”布局。在“桌面”布局中运行时，通常会出现极小的文本和/或极长的行。两者都不好。
最后，设备大小并不总是等于视口大小。对于任何可以取消窗口最大化的设备（尤其是桌面设备），以及任何运行Windows 8的设备（它都有一种并排模式），情况尤其如此。
那你做什么？而是根据您的内容设计您的断点。 Check out em-based media queries，它使用相对测量而不是固定宽度，当然，确保您的设计本身具有灵活性。
但是，如果您仍然打算使用像素，那么iPhone的目的是为320x480。它被列为640x960，因为像素密度大于72dpi（144dpi，或2x密度）。在这种情况下，1个CSS像素等于4个硬件像素（2个横跨，2个向下）。但是，请注意并非总是如此。许多Android设备的像素密度为1.5倍，而且趋势是更高的密度。这对CSS的影响不大（除了列出的分辨率和功能CSS分辨率之间的差异），但它确实会影响你的图像。
答案 1 :(得分：0)
iPhone4有640个物理像素的宽度，但iOS Safari在评估样式表时不使用物理像素。相反，iOS Safari呈现为320像素宽，以便更接近以前的iPhone宽度。
如果您确实需要单独访问高分辨率屏幕，可以使用：-webkit-device-pixel-ratio。请记住，iOS不是唯一的高分辨率设备。详情了解https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio处的设备像素比率。
答案 2 :(得分：-1)
使用此工具（screenfly）它很棒https://quirktools.com/screenfly/