停止 Firefox DPI 缩放(当 Windows 设置为 125% 时)

Posted

技术标签:

【中文标题】停止 Firefox DPI 缩放(当 Windows 设置为 125% 时)【英文标题】:Stop Firefox DPI Scaling (when Windows setting is at 125%) 【发布时间】:2014-05-30 18:13:58 【问题描述】:

我目前正在制作一个网页并在 chrome 中测试它工作正常,但在 Firefox 中 - 它被放大了。

这是因为我在 Windows 中的 DPI 设置为 125%,而 Firefox 会检测到这一点,并相应地调整每个网页。

但是,我的网页不适合以这样的缩放级别查看,图像不会显示得那么大,因此看起来模糊/像素化。页面的总体布局也很乱,因为一切都那么大。

现在,这不会影响大多数人 - 因为他们的 DPI 在 Windows 中会达到 100%。但是,我希望它在所有浏览器上都相同。

我已经搜索并找到了让用户禁用此“功能”的解决方案——但我希望能够从我的网站上禁用它——所以它首先对用户来说并没有错。

例如一篇文章说:

1) 在地址栏中输入about:config 2) 搜索layout.css.devPixelsPerPx 3) 将layout.css.devPixelsPerPx 的值从-1.0 更改为1.0

但这不是我想要的。 有什么办法可以从 CSS/html/anything 中禁用它?

谢谢。

【问题讨论】:

我也有同样的问题。这是一个主要的烦恼,到目前为止我无法找到解决方案 处理同样的问题并尝试了about:config > layout.css.devPixelsPerPx 解决方案,这给了我与 Fx 33.1.1 上的 Chrome 相同的布局(缩放:100%)。你能链接帖子吗? Firefox 设置似乎连接到bugzilla.mozilla.org/show_bug.cgi?id=844604 【参考方案1】:

这也让我很沮丧,但幸运的是有一个解决方案。

导航到about:config。 (在任何警告您小心使用高级功能的警告上单击接受)

搜索layout.css.devPixelsPerPx 并将其值更改为1.0,您的问题应该会得到解决。

这是在 Firefox 22 中实现的。

【讨论】:

与问题无关。这(如果有效)是本地的事情。但是访问该页面的用户通常没有启用此设置。在某些国家/地区,125% 是 windows 的默认设置。【参考方案2】:

将其设置为 1.25:这会使用户界面更大,但会将网站重置为 100% 像素映射。

【讨论】:

【参考方案3】:

您可以通过包含以下媒体查询,轻松地让您的网站使用更高缩放级别的设置来吸引用户:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
       only screen and(      -o-min-device-pixel-ratio: 5/4 ),
       only screen and( min-resolution: 120dpi ),
       only screen and( min-resolution: 1.25dppx ) 
    body 
        font-size: 1rem;
    
 

请参阅this article for an extended explanation 以及为什么媒体查询的清理解决方案足以支持广泛的浏览器:IE9+、Fx3.5+、Opera9.5+、Webkit 浏览器 Chrome 和 Safari,桌面版和移动版。

【讨论】:

正确链接:brettjankord.com/2012/11/28/… @GlennJorde 另外,HTTPS 链接似乎不再起作用了……:/【参考方案4】:

您可以尝试以下类似的方法。使用这个有一些注意事项,但在某些情况下 值得使用。

    @media screen and (min-resolution: 120dpi)  
    /*body transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;*/
    body transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;

评论/*body....*/ 示例比例可能更容易理解,但更糟糕的是,f.e.因为 缩放应该基于 transform-origin css 规则左上角。然后可以更好地渲染,尤其是在 Chrome 中。

如果您使用width: 125%,您的 RWD css 对更改浏览器尺寸的反应应该与您在屏幕比例为 100% 时的预期不同。 您可能会合理地接受这一点 - 这是 RWD,差异为 25%。但是有些人可能想像这样调整他们的 css:

@media screen and (min-width: 1000px)

你还需要调整:

@media screen and (min-width: 800px)

可能不是 1250 像素,而是 800 像素,就像我做的那样。

Edge、Chrome、FF 做的都不错。 IE 11 呈现了最糟糕的情况,但并非毫无希望。

扩展选择字段时FF(不是edge,chrome)存在一些问题-解决方案css select。 有些边框在 FF 上可以看到有些消失(可能不是边缘,镀铬)

可能会有一些此处未提及的问题,例如当您在页面上使用轮播(如 owlcarousel)时。

但我认为这个例子测试的太少,节省更多时间的可能性更大。

对于 125% 的屏幕,您必须使用精确的缩放比例(例如 0.8)才能使图像尽可能清晰。

我注意到,当在桌面浏览器中使用 ctrl +/i 切换到不同的 dpi 分辨率并确保在移动浏览器中使用多点触控手势时,浏览器也会更改 dpi,因此任何使用 @media min/max-resolution 的解决方案可能不会按预期工作。 css 中需要的是读取系统分辨率而不是浏览器。但是,正如我看到的那样,当有人手动或通过旋转移动设备更改浏览器大小时,这种分辨率变化不会发生。

感谢石达之纠正我的回答中的一些错误。

【讨论】:

谢谢,这似乎有效!【参考方案5】:

我是这样做的,缩放比变换效果更好,它不会使固定元素成为绝对:

@media screen and (min-resolution: 120dpi)  
body zoom: 0.8;

【讨论】:

以上是关于停止 Firefox DPI 缩放(当 Windows 设置为 125% 时)的主要内容,如果未能解决你的问题,请参考以下文章

高分辨率下firefox字体和界面自动放大的问题

windows DPi缩放

win10缩放影响鼠标dpi

win10 dpi设置是啥意思

win10高dpi设置时禁用显示缩放有啥用?

Dpi缩放问题