如何在 Firefox 响应式设计模式下呈现实际设备屏幕尺寸？答案

【问题标题】：How to present actual device screen size in Firefox responsive design mode?如何在 Firefox 响应式设计模式下呈现实际设备屏幕尺寸？
【发布时间】：2020-06-27 15:34:57
【问题描述】：

使用Firefox Dev Tool窗口调试HTML图形，我们如何得到仿真设备的真实尺寸？

我似乎无法弄清楚或找到信息。

我想在这里尽可能清楚：

如果我将 iPad 2 放在笔记本电脑屏幕上，它的宽度或高度（水平和垂直方向）明显小于 Firefox 在屏幕上显示的内容。

这在手机上最为明显；手机模拟离开屏幕，高度为 768 像素。

F.ex.当然，iPad 2 是 1024x768，但在 1376 像素宽的笔记本电脑屏幕上，模拟框架在水平方向上几乎占据了整个水平屏幕空间。

编辑 about:config layout.css.devPixelsPer... 东西使它更小，但是对于 DPR 1 设备，它更真实，但是，自定义设备的 DPR 设置不会改变任何事情。（为什么会出现）。

Google DevTools 的行为相同（像素密度不起作用）

这是截图

很明显，我是在比较屏幕区域，而不是整个手机，抱歉。

【问题讨论】：

这是因为像素密度。您可以在窗口顶部的开发工具中看到您设置的任何内容的宽度，就在您设置设备的位置旁边。
@cloned 为什么不，为什么不呢？在我的问题中，我提到我想要一个解决方法。如果你认为这不是正确的思考方式，你能告诉我为什么吗？问题是，如果我需要使用媒体宽度标签使字体/字体变大或变小，我无法确定我应该设置什么比例，除非我求助于在真实设备上进行测试，这对于静态 HTML 来说太过分了。
@cloned 另外，假设我模拟了一台 4K 高清电视。我不需要在“真实”分辨率中看到它，因为它更大；我希望它适合我的屏幕，所以我可以测量缩放比例......所以是的，这与第一个问题相反，但现在你可以看到我的问题的两个角度
对不起，我完全不明白你的问题。也许您可以编辑您的问题并提供一些您无法解决的问题的示例图片？
这可能是同一个问题吗？ stackoverflow.com/questions/60543021/…

标签： html dpi

【解决方案1】：

您永远无法完全按照自己的意愿行事。 Firefox 提供了一个近似值，因此 1125 x 2436 像素的 iPhone 11 Pro 在 FF RD 模式下显示为 375 x 812 DPR = 3 的三分之一。这使得屏幕上的渲染类似于物理 iPhone 11 尺寸。

问题在于您现在使用 PC 屏幕上的一个像素来表示手机上的 9 个像素。文本和其他一切都将变得非常模糊。所以检查易读性的目标是不可能的（假设他们没有开始制作与手机屏幕具有相同像素密度的 PC 屏幕）。

此外，Firefox 并未考虑 PC 屏幕的实际像素密度（DPR 3 是一个近似值）。在高清分辨率下的 12 英寸屏幕上的电话表示将比在高清分辨率下的 11 英寸屏幕上更大（12 英寸上的像素数相同，它们只是更大）。正如 RaoulU 在另一个答案中指出的那样，你可以调整浏览器缩放以解决此问题。

大多数开发人员都想看看他们的设计在放大后的 DPR 1 上是如何布局的，并且在手机上的可读性应该是合理的，但必须在手机上进行检查。 FF 不允许您在选择设备后切换 DPR 似乎很奇怪，但媒体查询可能存在问题。虽然 FF 显示宽度为 375，但显然您的媒体查询必须在 1125 范围内工作。（虽然这是糟糕的设计。我认为没有理由显示缩小的尺寸，因为很高兴看到手机像素来决定您的媒体查询应该在哪里下降。并且 DPR 对于设备是灰色的，然后对自定义分辨率没有影响。）

【讨论】：

【解决方案2】：

我也注意到了。我在 iMac 27" 上，模拟的屏幕尺寸（对于 iPhone、ipad 和 MacBooks）总是比实际的物理屏幕大得多。这使得 Firefox Developer 可用于测试布局的响应式变化和类似的东西那个，但在判断排版和其他视觉元素的大小时要少得多。有一个解决方法：您可以使用 Cmd -/+ 或通过菜单 > 缩放来放大或缩小。缩放百分比显示在右侧的 URL 框中。增量是 100、90、80，然后奇怪的是 67%。你瞧，67% 与我真正的 iPhone 6s 的屏幕完全匹配。但是对于 13 英寸的 MacBook Air 来说，80% 更接近实际尺寸。而对于 21 英寸的 iMac 来说，情况恰恰相反：我需要放大到 110% 才能接近实际尺寸。所以很难理解发生了什么，但你可以稍微缓解一下这个缺陷。

【讨论】：

这是因为所有这些屏幕上的像素密度都不同，即使它们都是全高清的，具体取决于屏幕尺寸。不同手机也一样。 67% 可能适用于 iPhone 7s 的同一台 PC（如果密度相同并且他们添加像素以使屏幕稍大），但不太可能适用于可能具有不同屏幕技术和密度的 Galaxy 6即使它与 iPhone 6 的尺寸完全相同。