1

我正在为移动网络应用程序编写 CSS。当我意识到 iphone4 屏幕的宽度应该是 640 像素时。我从浏览器得到的结果表明屏幕是 320 像素。例如，如果我使用 160px 的 div，它会占据半屏。我的问题是我必须设计的移动应用程序的尺寸？

4

3 回答 3

2

不要为尺寸设计。

如果你这样做，你会把自己逼疯的。为什么？

哪个更大 - iPad 或桌面显示器？可能不是你期待的那个。最新的 iPad 时钟为2048x1536，可以说比许多桌面显示器大。

此外，正如您现在所看到的，众所周知，设备会对其分辨率“撒谎”。这与像素密度以及设备像素（历史上是显示器中的物理部分）和 CSS 像素（测量单位）之间的差异有关。

此外，根据您对媒体查询所做的更改，您可能会得到意想不到的结果。例如，Kindle Touch 报告的分辨率与同代 iPad 相同，但其基本字体大小为 20 像素，而不是通常的 16 像素。这可能会给您的设计带来灾难，尤其是在您使用基于 em 的字体时。然后，还有一个事实是移动设备并不是唯一的非桌面屏幕。投影仪呢？它们通常以 1024x768 或更高的分辨率运行，但由于观看距离有多远，它们通常更适合使用“移动”布局。在“桌面”布局中运行时，您通常会得到极小的文本和/或极长的行。两者都不好。

最后，设备大小并不总是等于视口大小。对于任何可以取消最大化窗口的设备来说尤其如此 - 不仅包括桌面，还包括任何运行 Windows 8 的设备（它具有一种并排模式）。

所以你会怎么做？相反，根据您的内容设计断点。查看基于 em 的媒体查询，它使用相对测量，而不是固定宽度，当然，请确保您的设计本质上是灵活宽度的。

但是，如果您仍然打算使用像素，那么对于 CSS 而言，iPhone 是 320x480。它被列为 640x960，因为像素密度大于 72dpi（它是 144dpi，或 2x 密度）。在这种情况下，1 个 CSS 像素等于 4 个硬件像素（2 个横向，2 个向下）。但是，还要注意并非总是如此。许多 Android 设备的像素密度为 1.5 倍，并且趋势正在朝着更高的密度发展。这不会对您的 CSS 产生太大影响（除了列出的分辨率和功能 CSS 分辨率之间的差异），但它确实会影响您的图像。

于 2013-07-30T18:46:34.513 回答
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上查看有关设备像素比的更多信息。

于 2013-07-30T19:05:02.690 回答
-1

使用这个工具（screenfly）它很棒https://quirktools.com/screenfly/

于 2013-07-30T18:33:52.857 回答