停止 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% 时)的主要内容,如果未能解决你的问题,请参考以下文章