FF“响应式设计视图”和 Retina

【问题标题】：FF 'Responsive Design View' and RetinaFF“响应式设计视图”和 Retina
【发布时间】：2014-02-20 12:22:41
【问题描述】：

我喜欢使用 Firefox 的“响应式设计视图”在我的桌面上模拟多个移动设备。但我怀疑一件事。

据我了解，配备 Retina 的 iPhone 每个 CSS 像素使用 2 个物理像素。而 Firefox 的“响应式设计视图”则没有。这意味着如果我想模拟分辨率为 960x640 的 iPhone 4 屏幕，我实际上应该使用 FF RDV 预设 480x320（并为 iPhone 5 添加预设 568x320）。对吧？

【问题讨论】：

如果 FF 不使用每个逻辑像素 2 个点，则将浏览器缩放到 200%。

标签： css firefox responsive-design retina-display firefox-developer-tools

【解决方案1】：

您应该使用 480x320 视口尺寸是对的，因为所有尺寸测量都是基于逻辑像素而不是屏幕的物理像素。

如果您想彻底测试网站的视网膜内容，并且您没有视网膜屏幕，请将 about:config 页面中 layout.css.devPixelsPerPx 的值更改为 2。 -1 是默认值。请注意，UI 看起来都很大，但这会以每 px 媒体查询的像素数正确启动，等等。

我刚刚尝试了 devPixelsPerPx 调整和 RDV，效果很好 - RDV 看起来是一个很棒的工具！

【讨论】：