Question

我遇到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技术可以使各个浏览器的页面看起来相同？

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

之所以出现差异是因为Firefox使用了系统缩放级别。在Windows上默认设置为125％。 Chrome使用的默认级别为100％。

我建议为Chrome设计，因为这样文字总是可读的。

Answer 3

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

对于Firefox：

打开一个新标签，在地址栏中输入about：config，然后输入按回车。
然后使用搜索框，输入单词＆＃34; pixel＆＃34;然后它会显示出来＆＃34; layout.css.devPixelsPerPx＆＃34;
将值-1.0更改为1表示100％完美比例......

对于Chrome：

右键单击chrome图标或chrome快捷方式图标，转到属性。
然后在＆＃34;目标：＆＃34;字段，单击该字段，然后按结束按钮。
现在你看到了这个＆＃34; chrome.exe＆＃34;最后。
复制此文本：chrome.exe＆＃34; /高dpi支撑= 1 /力装置级因子= 1

并粘贴在chrome.exe＆＃34;
然后重启chrome或关闭浏览器并双击快捷方式图标。

Chrome和Firefox浏览器默认缩放

3 个答案: