logo标签列表

Chrome和Firefox浏览器默认缩放级别问题

cssgoogle-chromefirefox
6
我有一个问题与这个页面相关。我在Firefox默认缩放级别下开发它。由于我是个白痴，我没有在Chrome上测试过它。所以，现在我看到页面的布局和/或字体大小在Chrome和其他基于Webkit的浏览器上不同。默认的Chrome缩放级别为75%，因此在Chrome上一切都更小。我必须说，我已经做了十几个Web应用程序，但是集中精力处理了应用程序的后端，并从未考虑过页面在不同浏览器上的外观。
我的意思是，如果需要解决javascript跨浏览器问题，我就会考虑，但是我从未遇到过这种情况。
我认为出问题的地方是字体大小。我有一个包装整个应用程序的#main-wrap，具有基本字体大小16px。因此，#navigation a具有0.7em，因为在Firefox中看起来很正常，但在Chrome中看起来非常小。
有人可以发布一些提示或提示，说明为什么会发生这种情况吗？
编辑：
我已经解决了这个问题。
zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;

它能够工作，但是我知道像这样做是好的。是否有一种CSS技术可以让页面在不同浏览器中看起来相同？

2
默认的Chrome缩放级别是75％吗？不是。 - Paulie_D
哦，是的，你说得对。我做出了这个假设，认为Firefox是100％。由于Chrome中应用程序看起来较小，我以为它是75％。你知道如何解决吗？也许有一篇文章可以帮助解决问题？我查看了谷歌，但没有找到任何东西或者我没找对方法。 - Mario Legenda
我不得不清除Firefox和Chrome的缓存和站点首选项才能看到它。 - Mario Legenda
我在第一次访问时没有缓存，所以仍然无法重现这个问题。 - Paulie_D
我不知道该说什么。我打电话给两个只使用Firefox的朋友。他们安装了Chrome并像我一样看到了它。此外，所有浏览器中的缩放都设置为默认的100％。 Webkit浏览器较小，而Firefox较大。我不明白。我使用了这个链接https://dev59.com/eWox5IYBdhLWcg3wFAjW解决了这个问题，但答案说这是一个糟糕的修复方法，因为可以使用适当的CSS技术来获得相同的结果，但我不知道它们是什么。 - Mario Legenda
显示剩余2条评论
3个回答
2

我也遇到了这个问题。使用@viewport标签效果很好。以下是我用来解决问题的文章：

有很多类似的问题和建议。以下是其中一个帮助我的答案：

1

这里是你的答案......

对于Firefox：

  1. 打开新标签页，输入about:config到地址栏中，然后按回车。

  2. 使用搜索框，输入单词“pixel”，然后它会显示“layout.css.devPixelsPerPx”。

  3. 将值-1.0更改为1，以获得100％完美比例...

对于Chrome：

  1. 右键单击Chrome图标或Chrome快捷方式图标，进入属性。

  2. 然后在“目标：”字段中，单击该字段并按end按钮。

  3. 现在你可以看到末尾的“chrome.exe”。

  4. 复制此文本：chrome.exe“/high-dpi-support=1 /force-device-scale-factor=1

    并粘贴到chrome.exe”

  5. 然后重新启动Chrome或关闭浏览器并双击快捷方式图标。

0

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接