Chrome和Firefox浏览器默认缩放

Question

我对此页有个问题。我在Firefox中开发了它的默认缩放级别。我是个白痴，我还没在Chrome上测试过呢。所以，现在我看到页面的布局和/或字体大小在Chrome和其他基于Webkit的浏览器上是不同的。默认Chrome变焦级别为75%，因此Chrome上的所有内容都较小。我不得不说，我已经开发了十几个web应用程序，但都集中在应用程序的后端，从来没有在不同的浏览器上考虑过页面的外观。

我的意思是，如果javascript跨浏览器的东西必须解决，但这是我从未遇到的事情。

我认为这是错误的字体大小。我有一个#main-wrap包整个应用程序，并有一个基本的字体大小为16px。因此，#navigation a有0.7em，因为在火狐中它看起来很正常，但在Chrome中看起来很小。

有人能给我一些提示或提示来说明这件事的发生吗？

编辑

我解决了这个问题

zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;

但是，我知道，这样做是件好事。是否有一种CSS技术可以让页面在不同的浏览器上看起来一样呢？

Answer 1

我也有过这个问题。使用@viewport标记效果很好。以下是我用来解决这些问题的文章：

• Firefox @viewport标记- https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport
• 设置视口和缩放- https://css-tricks.com/snippets/html/responsive-meta-tag/
• 为了确保字体在浏览器上正确显示权重，有一篇关于伪字体粗体的文章是http://alistapart.com/article/say-no-to-faux-bold。

有许多类似的问题和建议。这里有一个帮助我的：

• https://stackoverflow.com/a/26353104/2256476

Answer 2

这里是你的答案.

火狐的 :

1. 打开一个新选项卡，在地址栏中键入约:config，然后按enter键。
2. 然后使用搜索框，输入单词“象素”，然后显示"layout.css.devPixelsPerPx“。
3. 将数值-1.0改为1，以达到100%的完美比例.

For Chrome:

1. 右键单击铬图标或铬快捷图标，转到属性。
2. 然后在“目标：”字段中，单击字段并按“结束”按钮。
3. 现在，您可以看到最后的"chrome.exe“了。
4. 复制文本: chrome.exe“/高dpi-支持=1/强制-设备规模-因子=1 粘贴在chrome.exe上“
5. 然后重新启动chrome或关闭浏览器，双击快捷图标。

Answer 3

造成这种差异的原因是Firefox使用了系统缩放级别。在Windows上，默认设置为125%。而Chrome则使用100%的默认级别。

我建议为Chrome设计，因为这样文本就永远是可读的了。