0

我正在为一个完全位于 Android 和 iOS 移动应用程序的 web 视图中的网上商店做一些 CSS。我正在使用媒体查询来区分手机和平板电脑。

我想出了一种方法来保持我的规则简单：有一个“电话”布局适用于设备宽度低于 768 像素的任何东西。其他一切都是平板电脑布局。这对我的目的来说很好。

内容显示在应用程序中，该应用程序在所有手机上都强制进入纵向模式。因此，如果用户倾斜他们的手机，比如 700 x 900 像素，他们的设备宽度仍然是 700 像素。所以这一切都很好。

有一段时间，我认为随着所有新移动设备的出现，事情一定会变得丑陋，因为它们具有超高分辨率。这意味着我将在这些手机上获得平板电脑布局。

幸运的是，操作系统和设备制造商已经提前解决了这个问题，像素值现在比实际的像素数要小得多。有一个名为的属性device-pixel-ratio，在新设备上具有 1.5 或 2.0 或 3.0 之类的值：只有当您将报告的像素乘以该比率时，您才能得到实际像素的数量。

伟大的。

现在我想知道：这种设置（“假”像素大小）是否适用于所有基于像素的 CSS 值？最具体地说，它是否适用于以下所有属性：

  • width
  • device-width
  • min-width
  • min-device-width
  • max-width
  • max-device-width （高度也一样）

还是这些婴儿中的一些获得“真实”像素数，而其他婴儿获得“假”像素？

编辑：

Chris 在他的回答中解释说，设备像素比为 2 的假设 700x900px 设备将报告“350px”width和“700px” device-width。因此，如果我想进行媒体查询，将此设备与其他手机大小的设备以及任何 iPad 宽度或以上的设备作为平板电脑进行分组，这是否是正确的媒体查询...

@media only screen and (max-device-width: 767px) { /* Phone-sized styling */}

@media only screen and (min-device-width: 768px) { /* Tablet-sized styling */}

（是的，我知道该orientation属性也适用于 iOS 设备，但让我们暂时忽略它）

4

1 回答 1

0

CSS 中的设备高度和宽度指的是屏幕的物理像素，而不是 CSS 像素，由device-pixel-ratio.

例如，如果手机的分辨率为 700 x 900，adevice-pixel-ratio为 2，则物理像素宽度为 700 像素，但 CSS 像素宽度为 350 像素。这意味着该屏幕width: 350px;上device-width: 700px;的大小完全相同。

希望有帮助！

于 2014-07-17T12:10:03.400 回答