如何在 Firefox 响应式设计模式下呈现实际设备屏幕尺寸?
How to present actual device screen size in Firefox responsive design mode?
使用 Firefox Dev Tool window 调试 HTML 图形,我们如何获得模拟设备的真实大小?
我似乎无法弄清楚或找不到信息。
我想在这里尽可能清楚:
如果我在我的笔记本电脑屏幕上放置一个 iPad 2,它的宽度或高度(水平和垂直方向)明显小于 Firefox 在屏幕上显示的内容。
这在 phones 时最为明显; phone 模拟离开屏幕,高度为 768px。
F.ex。当然,iPad 2 是 1024x768,但是在 1376px 宽度的笔记本电脑屏幕上,仿真框架几乎占据了水平方向的整个水平屏幕 space。
编辑
about:config layout.css.devPixelsPer...
东西使它更小,并且对于 DPR 1 设备使它更逼真,但是,
自定义设备的 DPR 设置不会改变任何事情。 (为什么在那里)。
Google DevTools 的行为相同(像素密度没有任何作用)
截图如下
很明显,我比较的是屏幕区域,而不是整个屏幕区域phone,抱歉。
我也注意到了。我在 iMac 27" 上,模拟的屏幕尺寸(对于 iPhone、ipad,但也适用于 MacBooks)总是比实际的物理屏幕大得多。这使得 Firefox Developer 对于测试响应变化非常有用布局和类似的东西,但对于判断排版和其他视觉元素的大小来说就更不用说了。
有一个解决方法:您可以使用 Cmd -/+ 或通过菜单 > 缩放来放大或缩小。缩放百分比显示在右侧的 URL 框中。增量是 100、90、80,然后奇怪的是 67%。你瞧,67% 与我真实的 iPhone 6s 的屏幕完全匹配。但是对于 13 英寸的 MacBook Air,80% 更接近实际尺寸。对于 iMac 21 英寸来说,情况恰恰相反:我需要放大到 110% 才能接近实际尺寸。所以很难理解发生了什么,但你可以稍微减轻这个缺陷。
您永远无法完全按照自己的意愿行事。 Firefox 给出了一个近似值,因此 iPhone 1125 x 2436 像素的 11 Pro 在 FF RD 模式下显示为 375 x 812 和 DPR = 3 的三分之一。这使屏幕上的渲染类似于物理 iPhone 11 码。
问题在于您现在使用 PC 屏幕上的一个像素代表 phone 上的 9 个像素。文本和其他一切都将变得非常模糊。所以检查易读性的目标是不可能的(假设他们不开始制造像素密度与 phone 屏幕相同的 PC 屏幕)。
除此之外,Firefox 并未考虑 PC 屏幕的实际像素密度(DPR 3 是一个近似值)。 phone 在 12" 高清屏幕上比在 11" 高清屏幕上的 phone 表示要大(12" 上的像素数量相同,只是更大)。正如 RaoulU 在另一篇文章中指出的那样在这里回答你可以调整浏览器缩放来解决这个问题。
大多数开发人员都想看看他们的设计在放大的 DPR 1 上的布局,以及在 phone 上的易读性应该是合理的,但必须在 phone 上进行检查。 FF 不允许您在选择设备后切换 DPR 似乎很奇怪,但媒体查询可能存在问题。虽然 FF 显示 375 的宽度,但显然您的媒体查询必须在 1125 的基础上工作。(虽然这是糟糕的设计。我认为没有理由显示缩小的尺寸,因为很高兴看到 phone 像素来决定在哪里你的媒体查询应该下降。并且 DPR 对于设备是灰色的,然后对自定义分辨率没有影响。)
使用 Firefox Dev Tool window 调试 HTML 图形,我们如何获得模拟设备的真实大小?
我似乎无法弄清楚或找不到信息。
我想在这里尽可能清楚:
如果我在我的笔记本电脑屏幕上放置一个 iPad 2,它的宽度或高度(水平和垂直方向)明显小于 Firefox 在屏幕上显示的内容。
这在 phones 时最为明显; phone 模拟离开屏幕,高度为 768px。
F.ex。当然,iPad 2 是 1024x768,但是在 1376px 宽度的笔记本电脑屏幕上,仿真框架几乎占据了水平方向的整个水平屏幕 space。
编辑
about:config layout.css.devPixelsPer...
东西使它更小,并且对于 DPR 1 设备使它更逼真,但是,
自定义设备的 DPR 设置不会改变任何事情。 (为什么在那里)。
Google DevTools 的行为相同(像素密度没有任何作用)
截图如下
很明显,我比较的是屏幕区域,而不是整个屏幕区域phone,抱歉。
我也注意到了。我在 iMac 27" 上,模拟的屏幕尺寸(对于 iPhone、ipad,但也适用于 MacBooks)总是比实际的物理屏幕大得多。这使得 Firefox Developer 对于测试响应变化非常有用布局和类似的东西,但对于判断排版和其他视觉元素的大小来说就更不用说了。 有一个解决方法:您可以使用 Cmd -/+ 或通过菜单 > 缩放来放大或缩小。缩放百分比显示在右侧的 URL 框中。增量是 100、90、80,然后奇怪的是 67%。你瞧,67% 与我真实的 iPhone 6s 的屏幕完全匹配。但是对于 13 英寸的 MacBook Air,80% 更接近实际尺寸。对于 iMac 21 英寸来说,情况恰恰相反:我需要放大到 110% 才能接近实际尺寸。所以很难理解发生了什么,但你可以稍微减轻这个缺陷。
您永远无法完全按照自己的意愿行事。 Firefox 给出了一个近似值,因此 iPhone 1125 x 2436 像素的 11 Pro 在 FF RD 模式下显示为 375 x 812 和 DPR = 3 的三分之一。这使屏幕上的渲染类似于物理 iPhone 11 码。
问题在于您现在使用 PC 屏幕上的一个像素代表 phone 上的 9 个像素。文本和其他一切都将变得非常模糊。所以检查易读性的目标是不可能的(假设他们不开始制造像素密度与 phone 屏幕相同的 PC 屏幕)。
除此之外,Firefox 并未考虑 PC 屏幕的实际像素密度(DPR 3 是一个近似值)。 phone 在 12" 高清屏幕上比在 11" 高清屏幕上的 phone 表示要大(12" 上的像素数量相同,只是更大)。正如 RaoulU 在另一篇文章中指出的那样在这里回答你可以调整浏览器缩放来解决这个问题。
大多数开发人员都想看看他们的设计在放大的 DPR 1 上的布局,以及在 phone 上的易读性应该是合理的,但必须在 phone 上进行检查。 FF 不允许您在选择设备后切换 DPR 似乎很奇怪,但媒体查询可能存在问题。虽然 FF 显示 375 的宽度,但显然您的媒体查询必须在 1125 的基础上工作。(虽然这是糟糕的设计。我认为没有理由显示缩小的尺寸,因为很高兴看到 phone 像素来决定在哪里你的媒体查询应该下降。并且 DPR 对于设备是灰色的,然后对自定义分辨率没有影响。)