html - Windows 8.1 上 Chrome 中的字体大小损坏

Question

自从将我的 PC 更新到 Windows 8.1 后，我设计的几个网站在 Chrome 上显示时一直遇到字体大小问题。

网站的设计没有任何变化。

我的导航坏了，因为文本现在对于菜单栏来说太长了。经过一些搜索，我在与 HiDPI 相关的 super 用户论坛上找到了答案。

https://superuser.com/questions/803601/text-size-suddenly-got-bigger-on-all-sites-on-google-chrome

此问题的答案与解决用户本地计算机上的问题有关。我不确定在 Chrome 中查看时是否所有运行 Windows 8.1 的计算机上都会出现这种情况。如果问题是错误，我该如何解决？

这是一个 JSFiddle，它仍然在我的屏幕上显示损坏。

这里没有代码 JSFiddle

(请记住，如果您没有遇到错误，这可能会正确显示。如果存在错误，最后一个菜单项将出现在第一个菜单项的下方)

我是否应该减小菜单字体的大小并影响网站的设计，以保证菜单正常运行？

我需要为所有遇到此问题的人提供修复，而不仅仅是我。

有人知道修复方法吗？

Answer 1

您最好的选择是确保将视口(viewport)设置为默认值 0，并为所有元素设置核心字体大小。

视口(viewport)

<meta name="viewport" content="width=device-width, initial-scale=1">

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalableproperties control how users are allowed to zoom the page in or out.

Viewport MDN

字体

* {
  font-size: 16px;
}

这会将所有元素的 font-size 设置为 16px，并将覆盖用户浏览器的默认字体大小。

这两者一起使用应该在某种程度上有助于确保所有浏览器和设备类型都按预期呈现您的页面。