Chrome 和 Firefox 浏览器默认缩放答案

【问题标题】：Chrome and Firefox Browser Default ZoomChrome 和 Firefox 浏览器默认缩放
【发布时间】：2014-11-08 02:12:08
【问题描述】：

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

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

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

有人可以就这种情况的发生方式发布一些提示或提示吗？

编辑：

我已经解决了问题

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

它确实有效，但据我所知，这样做是件好事。是否有一种 CSS 技术可以让页面在不同浏览器中看起来都一样？

【问题讨论】：

“Chrome 的默认缩放级别是 75%”...不，不是。
哦，是的，你是对的。我做了这个假设，认为 Firefox 是 100%。由于应用在 Chrome 中看起来更小，我认为它是 75%。你知道怎么解决吗？也许是一篇文章？我通过谷歌查看，但找不到任何东西或看起来不正确
看不到 Chrome 与 FF 的区别
我必须清除 Firefox 和 Chrome 的缓存和站点首选项才能看到它。
我第一次访问时没有缓存，所以我仍然无法重现该问题。

标签： css google-chrome firefox

【解决方案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

【讨论】：

【解决方案2】：

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

我建议为 Chrome 设计，因为这样文本将始终可读。

【讨论】：

【解决方案3】：

Here 是你的答案......

对于火狐：

打开一个新选项卡，然后在地址栏中输入 about:config，然后按回车键。
然后使用搜索框，输入“像素”这个词就会显示 “layout.css.devPixelsPerPx”。
将值 -1.0 更改为 1 以获得 100% 完美比例...

对于 Chrome：

右键单击 chrome 图标或 chrome 快捷方式图标，转到属性。
然后在“目标：”字段中，单击该字段并按结束按钮。
现在您会在结尾看到这个“chrome.exe”。
复制此文本：chrome.exe" /high-dpi-support=1 /force-device-scale-factor=1

并粘贴到 chrome.exe"
然后重启chrome或者关闭浏览器双击快捷方式图标。

【讨论】：