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

42

我正在制作一个网页并在Chrome中测试,显示正常,但在Firefox中缩放了。

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

然而,我的网页不是为这样的缩放水平而设计的,图像也不是为展示那么大而制作的,因此它看起来模糊/呈像素状。页面的一般布局也会混乱,因为所有内容都太大了。

现在,这不会影响大多数人 - 因为他们在Windows中的DPI将为100%。然而,我希望在所有浏览器上都是一样的。

我已经搜索并找到了用户禁用此“功能”的解决方案 - 但我想能够从我的网站上禁用它,以便用户第一次访问时就看起来正确。

例如,有一篇帖子说:

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

但这不是我要找的东西。是否有任何方法可以通过CSS / HTML / 任何东西禁用它?

谢谢。


5
我有完全相同的问题。这是一个重大的烦恼,到目前为止我还没有找到解决方案。 - ProblemsOfSumit
处理相同的问题并尝试了 about:config > layout.css.devPixelsPerPx 的解决方案,但是它给我在 Fx 33.1.1 上与 Chrome 在 Zoom:100% 下相同的布局。你能提供该帖子的链接吗? - Volker E.
Firefox的设置似乎与https://bugzilla.mozilla.org/show_bug.cgi?id=844604有关。 - Volker E.
5个回答

14

您可以通过包含如下媒体查询,轻松地让您的网站在较高的缩放级别下使用:

@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;
    }
} 

查看此文章以获取更详细的解释,并了解已经清理过的媒体查询方案为何足以支持广泛的浏览器:IE9+、Fx3.5+、Opera9.5+、WebKit浏览器Chrome和Safari,包括桌面版和移动版。


请转到此链接以了解跨浏览器的Retina /高分辨率媒体查询:https://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/ - Glenn Jorde
@GlennJorde,另外HTTPS链接似乎不再起作用了... :/ - Volker E.

10
您可以尝试以下方法。使用此方法需要注意一些限制,但在某些情况下值得使用它。
    @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....*/的例子可能更容易理解,但效果较差,例如因为缩放应基于transform-origin css规则的左上角。这样可以更好地呈现内容,特别是在Chrome浏览器中。

如果使用width: 125%,您的响应式Web设计(css)应该根据此而对不同的浏览器大小做出不同的反应,与屏幕比例为100%时的预期有所不同。您可能会合理地接受这一点——这就是响应式Web设计(RWD),差异为25%。但有些人可能想要调整他们的CSS,如下:

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

你还需要调整以下内容:

您还需要进行调整:

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

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

Edge、Chrome和Firefox表现得相当好。IE 11的渲染效果最差,但并非没有希望。

在展开选择字段时,Firefox存在一些问题(而Edge和Chrome则没有)- 解决方法是使用CSS选择器。在Firefox中,一些边框可能可见,而另一些则会消失(也许Edge和Chrome则不会出现这种情况)。

可能还有其他问题没有在此处提到,例如在页面上使用类似于owlcarousel的走马灯。

但我认为,通过这个测试过的示例,节省时间的可能性更大。

您必须使用精确的缩放比例,如0.8,以使您的图像尽可能清晰地呈现在125%屏幕上。

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

感谢Tatsuyuki Ishi纠正了我的一些错误。


谢谢,这似乎有效! - Roger Travis

8
这也让我感到沮丧,但幸运的是有解决办法。
导航到about:config。(在任何警告提示你小心使用高级功能时点击接受)
搜索layout.css.devPixelsPerPx并将其值更改为1.0,你的问题应该就可以解决了。
这是在Firefox 22中实现的一个功能。

22
与问题无关。这(如果有效)是一个本地设置。但是访问页面的用户通常没有启用此设置。在某些国家/地区,125% 是 Windows 的默认设置。 - Ello

3
我用这种方法来解决,使用缩放比转换更好,它不会使固定元素变为绝对定位:
@media screen and (min-resolution: 120dpi) { 
body {zoom: 0.8;}
}

-2

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接