时间戳

首页 > 解决方案 > 如何在 Firefox 响应式设计模式下呈现实际设备屏幕尺寸？

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

问题描述

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

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

我想在这里尽可能清楚：

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

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

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

编辑关于：配置layout.css.devPixelsPer...的东西使它更小，并且对于 DPR 1 设备使它更现实，但是，自定义设备的 DPR 设置不会改变任何东西。（为什么会在那里）。

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

这是一个屏幕截图

与真实设备尺寸 (iPhone) 相比的响应式设计模式渲染（缩放至 50%）

显然，我是在比较屏幕区域，而不是整个手机，对不起。

标签： htmldpi

解决方案

你永远不可能完全按照你的意愿去做。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 对于设备是灰色的，然后对自定义分辨率没有影响。）

推荐阅读