如何模拟像素比以在 Windows 上使用 Google Chrome 或 Firefox 测试媒体查询？

Posted 2023-03-06

【中文标题】如何模拟像素比以在 Windows 上使用 Google Chrome 或 Firefox 测试媒体查询？

【英文标题】：How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

【发布时间】：2013-04-29 06:02:52

【问题描述】：

虽然在 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%; 

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

【问题讨论】：

Chrome 从版本 32 开始以非常方便的方式支持此功能（请参阅下面的答案）。对于 Firefox，andrewb 的回答仍然适用。

How to test a webpage meant for Retina display?的可能重复

请注意，-moz-min-device-pixel-ratio 已弃用，有关更多详细信息和更新方法，请参阅developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…。

【参考方案1】：

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

因此，基本上不可能模仿与设备本身不同的设备像素比。你仍然可以冒烟测试你的代码 f.e.而只是通过应用不同的媒体查询规则。

请注意min-device-pixel-ratio: 1.5，因为较新的 HDPi 设备（如 Nexus 7）具有1.3 device pixel ratio。

【讨论】：

谢谢！好吧，code.google.com/p/chromium/issues/detail?id=133590 DevTools 设备指标需要一种方法来覆盖 devicePixelRatio！你说得对，我没有其他机会伪造媒体查询。太糟糕了:)

抱歉，这不是真的，您可以模仿其他比率。看我的回答。

【参考方案2】：

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

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

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

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

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

【参考方案3】：

关于：Firefox 上的配置破解

您实际上可以使用 Firefox：

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

刷新您的页面 - 繁荣，您的媒体查询现已启动！向 Firefox 致敬，因为它在 Web 开发方面表现出色！

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

在 Firefox 和 Edge 上缩放

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

【讨论】：

@andrewb 是对的，在他发消息之前我没有遇到过这个设置。虽然1 for normal, 2 for retina 并不准确。正如最初的错误bugzilla.mozilla.org/show_bug.cgi?id=394103 和bugzilla.mozilla.org/show_bug.cgi?id=512522 所示，值 1 是 96 dpi(~ ppi) 的默认值。如果您想购买 220 ppi 的 MacBook Pro，则必须输入 2.29 (220/96) 或 iPhone 输入 3.4 (326/96)。

@VolkerE。这取决于您要测试的内容。您所说的可能适合物理图像显示大小（即 cmxcm）和字体大小（em）。但是对于媒体查询是否触发，我很有信心 2 是正确的数字。此外，对于图像渲染，2 将再次成为正确的数字。

当我尝试这个时，不仅查看器窗口增加了“缩放因子”（预期），而且（1）chrome（2）所有窗口，而不仅仅是一个被测试的窗口（排序预期的，因为设置的全局性质）（3）萤火虫（我可能应该预料到这个，但没有）。后者意味着更高分辨率的显示器（例如，考虑您的 600dpi 打印机）可能是可显示的，但不可调试。需要有一个只影响特定选项卡和窗口的 内容的设置。

@Victoria 是的，这很 hacky，并且拥有特定于选项卡的功能会很棒。不幸的是，我还没有找到任何其他与仿真一样全面的东西。 Chrome DevTools 已关闭，但无法适当放大，因此您无法查看全分辨率像素输出。

感谢您对 Chrome DevTools 的评论...我打算在有机会的时候检查一下，但是您确定了我正在寻找的一个主要功能，因为它丢失了，所以您保存了我有时间。

【参考方案4】：

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

打开开发者工具（ctrl-shift-i 或 command-alt-i） 点击右下角的齿轮进行设置 选择“覆盖”标签（在左侧） 点击“启用”和“在 DevTools 启动时启用” 检查“设备指标”并进行自定义。 “字体比例因子”似乎是设备像素比。

【参考方案5】：

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

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

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

【讨论】：

我对此感到沮丧，而且 Safari 最近的类似功能是您无法充分放大。因此，如果您的目的是仔细检查像素，那是不够的。真可惜，因为模拟窗口大小和触摸很棒！

虽然这对于测试/开发您的媒体查询很方便，但它不会向您显示渲染的样子；例如，当您在高分辨率屏幕上查看超轻字体时，它仍然看起来很棒。所有网页设计师都应该手头有一个垃圾屏幕，并附上 Windows PC 进行测试。

> 如需更多选项，请单击工具栏右侧的“...”。这次真是万分感谢。 “•••”太小了，我错过了。