使用 CSS、Header-Tag 或 JavaScript 强制缩放级别/DPI-Scale答案

【问题标题】：Force Zoom-Level/DPI-Scale with CSS, Header-Tag or JavaScript使用 CSS、Header-Tag 或 JavaScript 强制缩放级别/DPI-Scale
【发布时间】：2015-01-23 05:30:04
【问题描述】：

这里有一个奇怪的问题。我们有一个网站，几年来一直运行良好。几个月前，Firefox 开始根据用户在其操作系统上的 DPI 设置来缩放页面。

问题是，默认情况下，Windows 7 中的 DPI 比例设置为 125%（在我们的国家/地区），每个使用 Firefox 的访问者都会看到缩放的页面。然而，Internet Explorer 和 Safari 现在也在做同样的事情，我猜 chrome 也会紧随其后。

棘手的部分是：当我打开页面时，我看到了正确的布局。如果我检查浏览器的缩放级别，它会告诉我 100% - 当我使用 Firefox 或 Internet Explorer 打开同一页面时，所有内容都会按比例放大（放大）25%。如果我在浏览器设置中检查缩放级别，它会显示 100%。如果我缩小两次（至 80%），我会看到原始布局。

有没有一种简单的方法可以通过 CSS、JavaScript 或标题标签设置默认 dpi 比例/缩放级别？

这里有一些截图可以稍微解释一下我的问题。

这是过去几年习惯的正确布局。页面居中，左右有点背景

在 Firefox、IE 和 Safari 上，同一台计算机上的同一页面看起来像这样。它被放大了，你看不到背景，你看到的总内容少了一点。

所以现在我的问题是：我该怎么做才能使同一页面在不同的计算机上看起来一样，因为它涉及到缩放。我知道有几件事总是不同的，但规模应该是一样的。

编辑：

始终使用 transform: scale(.75); 缩放页面转换来源：100%； 0;并不总是合适的，因为如果具有 100% DPI 设置的用户访问该页面，所有内容都会为他最小化。我不能总是缩放页面。我需要以某种方式确定用户是否将他的操作系统设置为 100% 或 125% DPI 缩放。

编辑：

是的，有一个选项可以确定设置的缩放比例。至少对于我的设置，这现在可以工作了。我添加了在同一台机器上打开两个浏览器的屏幕截图（chrome 顶部，firefox 底部）以查看差异（以及严重需要某人解决的问题）

【问题讨论】：

好吧，我想您可以缩放主体以始终与width:100vw 匹配，然后使用% 缩放元素以始终使浏览器看起来与每个元素相同。但我想这在一个已经编码的网站上需要做很多工作。
@Persijn 是的，这是真的，这将是很多工作。当我们最终决定移民到一个新的商店系统并将这个自制的恶魔扔到它所属的地方，地狱的最深处时，我赞美主-_-
stackoverflow.com/questions/995914/… 抱歉，不可能

标签： css zooming dpi

【解决方案1】：

您可以使用 javascript 检查浏览器 dpi 级别，并使用 css 相应地缩放页面内容（如果需要）。

if(window.devicePixelRatio == 1 )
  $("body").addClass("zoom2x")

其中 zoom2x 是一个 CSS 类。

.zoom2x{
      zoom: 200%; /* all browsers */
     -moz-transform: scale(2);  /* Firefox */
}

您可以交叉检查您当前的 dpi 设置here 并验证结果。

【讨论】：

感谢您的成功。我编辑了我的问题并添加了屏幕截图
我们应该如何处理多个不同的 DPI 设置？无法保证用户的 DPI 仅为 125%，而不是其他值。
@posfan12 你的意思是跨不同浏览器的多个 DPI 设置？还是跨同一个浏览器的不同标签页？
不，我的意思是 A 有 125%，B 有 150%，等等。

【解决方案2】：

似乎没有针对此问题的代码修复，但可以通过更改浏览器设置来修复。请参阅以下链接：

https://support.mozilla.org/en-US/questions/962979 Stop Firefox DPI Scaling (when Windows setting is at 125%)

【讨论】：

感谢您的回答，但我无法接受此解决方案，因为我需要在用户计算机上可用的东西，而不是在我的计算机上。您不能指望用户必须更改设置，因为某些浏览器供应商通过以非冗余方式更改政治而发疯了。如果每个浏览器都以同样的方式处理这个问题，我可以适应它。此外，每个严肃的浏览器都会在更改之前实现某种回退，一个标志或其他东西。但 Mozilla 的做法远非公平。更改基本的缩放功能，无需解释，也无视数以百计的用户投诉