使用CSS、标题标记或JavaScript强制缩放级别/DPI缩放

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

问题是，在Windows7中，默认情况下DPI比例设置为125%（在我国），并且每个使用Firefox的访问者都会看到缩放的页面。然而，Internet Explorer和Safari现在也在做同样的事情，我想chrome也会跟着做

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

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

这里有一些截图来解释我的问题

这是过去几年中使用的正确布局。页面居中，左右两侧有一点背景

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

所以现在我的问题是：我能做什么，在不同的计算机上使相同的页面在缩放时看起来相同。我知道有些事情总是不同的，但尺度应该是相同的

编辑：

始终使用变换缩放页面：缩放（.75）；转移来源：100%；0; 并不总是合适的，因为如果具有100%DPI设置的用户访问该页面，那么对他来说，一切都将最小化。我不能总是缩放页面。我需要以某种方式确定用户是否已将其操作系统设置为100%或125%DPI缩放

编辑：

是的，有一个选项可以确定设定的比例率。至少在我的设置中，这个功能现在可以使用了。我添加了一个屏幕截图，其中两个浏览器在同一台机器上打开（chrome top，firefox bottom），以查看差异（以及严重需要有人修复的问题）

---

在此处输入代码“>

似乎没有代码修复程序，但可以通过更改浏览器设置来修复。请参阅以下链接：

---

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

其中zoom2x是一个css类

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

---

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

Wel我想您可以缩放主体以始终适合

宽度：100vw

，然后使用

%

缩放元素以始终使浏览器在每个人看来都是一样的。但我想在已经编码的站点上这是一项大量工作。@Persijn是的，这将是一个很大的工作。当我们最终决定移民到一个新的商店系统，把这个自制的恶魔扔到它所属的地方，地狱的最深处时，我赞美上帝-很抱歉，这是不可能的。谢谢你的回答，但我不能接受这个解决方案，因为我需要在用户电脑上工作的东西，而不是在我的电脑上。你不能预计用户必须更改设置，因为一些浏览器供应商以非冗余的方式更改政治而疯狂。如果每个浏览器都以相同的方式处理此问题，我可以适应它。此外，每个严肃的浏览器都会在更改前实施某种回退，一个标志或其他东西。但Mozilla的方式远远落后于fair、 在没有解释的情况下更改基本的缩放函数并忽略成百上千的用户抱怨谢谢。我编辑了我的问题并添加了一个屏幕快照我们应该如何处理多个不同的DPI设置？不能保证用户的DPI仅为125%，而不是其他任何设置。@posfan12您是指多个DPI设置acr吗oss不同的浏览器？或者在同一个浏览器的不同标签页之间？不，我的意思是人A有125%，人B有150%，等等。

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