CSS 如何模拟像素比以在 Windows 上使用 Google Chrome 或 Firefox 测试媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16382542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?
提问by Stephan Ahlf
While it is easy to test different screen resolutions in Google Chrome i wonder how developers could test different device pixel ratios underlying the following CSS media queries.
虽然在 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%; }
}
Does there exist any way or a browser extension to mimic device pixel ratio?
是否存在任何方式或浏览器扩展来模仿设备像素比？
回答by andrewb
about:config hack on Firefox
about:config hack on Firefox
You actually can using Firefox:
您实际上可以使用 Firefox：
- Go to "about:config"
- Find "layout.css.devPixelsPerPx
- Change it to your desired ratio (1 for normal, 2 for retina, etc.)
- 转到“关于：配置”
- 找到“layout.css.devPixelsPerPx
- 将其更改为您想要的比例（正常为 1，视网膜为 2，等等）
Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing!
刷新您的页面 - 繁荣，您的媒体查询现已开始！向 Firefox 致敬，因为它在 Web 开发方面非常出色！
This was done on Windows 7 with Firefox 21.0.
这是在带有 Firefox 21.0 的 Windows 7 上完成的。
Zooming on Firefox & Edge
在 Firefox 和 Edge 上缩放
Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bugfor Firefox, so this could change.
目前在 Firefox 和 Edge 上，如果缩放它会触发基于 dppx 的媒体查询。因此，这种更简单的方法可能就足够了，但请注意，该功能被报告为 Firefox的“无法修复”错误，因此这可能会改变。
回答by rob74
The Chrome DevTools have a feature called "Device Mode & Mobile Emulation" available in Chrome 32 and higher.It is described in detail here. Here's a video tutorialfrom Google's DevBytes YouTube channel.
Chrome DevTools 有一项名为“设备模式和移动仿真”的功能，可在 Chrome 32 及更高版本中使用。在这里详细描述。这是来自 Google DevBytes YouTube 频道的视频教程。
Open DevTools by pressing F12 (or Shift+Ctrl+I/ Cmd+Opt+Ion Mac). In current Chrome versions, click the "smartphone" iconin the upper left corner of the DevTools window to activate Mobile Emulation. You can change most of the settings (device type, screen resolution & rotation, zoom factor...) in the toolbar on the emulation screen. For further options, click "..."on the right side of the toolbar.
按 F12（或Shift+Ctrl+I/ Cmd+Opt+I在 Mac 上）打开 DevTools 。在当前的 Chrome 版本中，单击DevTools 窗口左上角的“智能手机”图标以激活 Mobile Emulation。您可以在仿真屏幕的工具栏中更改大多数设置（设备类型、屏幕分辨率和旋转、缩放系数...）。如需更多选项，请单击工具栏右侧的“...”。
In older versions of Chrome, you may have to enable the feature before you can use it: in DevTools, click the Settingsicon (cogwheel), then click "Overrides"and select "Show 'Emulation' view in console drawer". Then, click the ">="icon to the left of the Settings icon to show the "console drawer" and you should see an "Emulation"tab, where you can enable the emulation and change the settings.
在旧版本的 Chrome 中，您可能需要先启用该功能，然后才能使用它：在 DevTools 中，单击设置图标（齿轮），然后单击“覆盖”并选择“在控制台抽屉中显示'仿真'视图”。然后，单击“设置”图标左侧的“>=”图标以显示“控制台抽屉”，您应该会看到“仿真”选项卡，您可以在其中启用仿真并更改设置。
回答by derrylwc
Volker E. is correct in that pixel-ratio media queries will not be triggered.
Volker E. 是正确的，因为像素比媒体查询不会被触发。
It is, however, possible at least to preview the visual appearance(read: scaling) of media queries for devices which are 1.5x, 2x, etc.
但是，至少可以预览1.5x、2x 等设备的媒体查询的视觉外观（读取：缩放）。
Just specify your desired resolution in Chrome Dev Tools, and make sure "Fit in window" is selected. Then, resize your browser window appropriately.
只需在 Chrome Dev Tools 中指定所需的分辨率，并确保选择“适合窗口”。然后，适当调整浏览器窗口的大小。
Example:to emulate a Galaxy Nexus in landscape mode, just enter 720x1280 as the dimensions, and then resize your browser window to be 640px wide. Voila! You have now emulated the device's 2x pixel ratio.
示例：要在横向模式下模拟 Galaxy Nexus，只需输入 720x1280 作为尺寸，然后将浏览器窗口的大小调整为 640 像素宽。瞧！您现在已经模拟了设备的 2x 像素比率。
(device width [in pixels]) ÷ (device pixel ratio) = the size your window must be
（设备宽度 [以像素为单位]）÷（设备像素比率）= 您的窗口必须的大小
回答by Garry Boyer
derrylwc has a good suggestion but did not include instructions:
derrylwc 有一个很好的建议，但没有包含说明：
- Open the developer tools (ctrl-shift-i or command-alt-i)
- Click the gear on the bottom right corner for settings
- Choose the "Overrides" tab (on the left side)
- Click "Enable" and "Enable on DevTools startup"
- Check "Device metrics" and customize. "Font scale factor" appears to be the device pixel ratio.
- 打开开发者工具（ctrl-shift-i 或 command-alt-i）
- 点击右下角的齿轮进行设置
- 选择“覆盖”选项卡（在左侧）
- 单击“启用”和“在 DevTools 启动时启用”
- 检查“设备指标”并自定义。“字体比例因子”似乎是设备像素比。
回答by Volker E.
You are just able to test the media query corresponding to the device pixel ratio on your specific device, you're looking at it's browser while testing.
The device pixel ratio is a device specific unchangeable number because it takes in account the devices available physical pixels.
See ppk's research on devicePixelRatio
您只能在您的特定设备上测试与设备像素比相对应的媒体查询，您在测试时正在查看它的浏览器。
设备像素比是设备特定的不可更改数字，因为它考虑了设备可用的物理像素。参见ppk 对 devicePixelRatio 的研究
So it's basically not possible to mimic a different device pixel ratiothan the device's very own. Still you can smoke test your code f.e. rather simply by applying a different media query rule.
因此，基本上不可能模仿与设备本身不同的设备像素比率。您仍然可以通过应用不同的媒体查询规则来对您的代码进行冒烟测试。
Take care about min-device-pixel-ratio: 1.5as newer HDPi devices like Nexus 7 have 1.3 device pixel ratio.
请注意min-device-pixel-ratio: 1.5Nexus 7 等较新的 HDPi 设备的像素比为 1.3。
