44

虽然在 Google Chrome 中测试不同的屏幕分辨率很容易，但我想知道开发人员如何测试以下 CSS 媒体查询的不同设备像素比。

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    #header { background: url(headerRatio1_5.png); background-size: 66.67%; }

}

/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #header { background: url(headerRatio2.png); background-size: 50%; }

}

是否存在任何方式或浏览器扩展来模拟设备像素比？

4

5 回答 5

49

关于：Firefox 上的配置破解

您实际上可以使用 Firefox：

  1. 转到“关于：配置”
  2. 找到“layout.css.devPixelsPerPx
  3. 将其更改为所需的比例（1 表示正常，2 表示视网膜等）

刷新您的页面 - 繁荣，您的媒体查询现在开始了！向 Firefox 致敬，因为它非常适合 Web 开发！

这是在带有 Firefox 21.0 的 Windows 7 上完成的。

放大 Firefox 和 Edge

目前在 Firefox 和 Edge 上，如果你缩放它会触发基于 dppx 的媒体查询。因此，这种更简单的方法可能就足够了，但请注意，该功能被报告为 Firefox的“无法修复”错误，因此这可能会改变。

于 2013-06-21T05:07:02.380 回答
33

Chrome DevTools 在 Chrome 32 及更高版本中有一个名为“设备模式和移动仿真”的功能。这里有详细描述。这是来自 Google DevBytes YouTube 频道的视频教程。

按 F12（或Mac 上的Shift+Ctrl+I / Cmd+Opt+I）打开 DevTools。在当前的 Chrome 版本中，单击DevTools 窗口左上角的“智能手机”图标以激活 Mobile Emulation。您可以在仿真屏幕的工具栏中更改大部分设置（设备类型、屏幕分辨率和旋转、缩放系数...）。如需更多选项，请单击工具栏右侧的“...” 。

在此处输入图像描述 在此处输入图像描述

在旧版本的 Chrome 中，您可能必须先启用该功能才能使用它：在 DevTools 中，单击“设置”图标（齿轮），然后单击“覆盖”并选择“在控制台抽屉中显示“仿真”视图”。然后，单击“设置”图标左侧的“>=”图标以显示“控制台抽屉”，您应该会看到“仿真”选项卡，您可以在其中启用仿真并更改设置。

于 2014-01-21T16:43:02.680 回答
4

Volker E. 是正确的，像素比率的媒体查询不会被触发。

但是，至少可以预览1.5x、2x 等设备的媒体查询的视觉外观（阅读：缩放）。

只需在 Chrome 开发工具中指定所需的分辨率，并确保选择了“适合窗口”。然后，适当调整浏览器窗口的大小。

在此处输入图像描述

示例：要在横向模式下模拟 Galaxy Nexus，只需输入 720x1280 作为尺寸，然后将浏览器窗口的大小调整为 640 像素宽。瞧！您现在已经模拟了设备的 2 倍像素比率。

(设备宽度 [以像素为单位]) ÷ (设备像素比) = 你的窗口必须是大小

于 2013-06-17T21:17:40.020 回答
1

derrylwc 有一个很好的建议，但没有包含说明：

  • 打开开发者工具（ctrl-shift-i 或 command-alt-i）
  • 点击右下角的齿轮进行设置
  • 选择“覆盖”选项卡（在左侧）
  • 单击“启用”和“在 DevTools 启动时启用”
  • 检查“设备指标”并自定义。“字体比例因子”似乎是设备像素比。
于 2014-01-11T21:14:59.853 回答
-4

您只需在特定设备上测试与设备像素比相对应的媒体查询，您在测试时正在查看它的浏览器。
设备像素比是设备特定的不可更改的数字，因为它考虑了设备可用的物理像素。查看ppk 对 devicePixelRatio 的研究

因此，基本上不可能模仿与设备本身不同的设备像素比。您仍然可以通过应用不同的媒体查询规则来简单地测试您的代码 fe。

请注意min-device-pixel-ratio: 1.5Nexus 7 等较新的 HDPi 设备具有1.3 设备像素比。

于 2013-05-05T09:12:23.173 回答