Windows 8.1中Chrome中的字体大小损坏

时间:2015-07-02 09:32:36

标签: html css google-chrome windows-8.1 dpi

自从将我的电脑更新到Windows 8.1后,我在Chrome浏览器上显示的几个网站上遇到了字体大小问题。

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

我的导航功能正在破坏,因为菜单栏的文字现在太长了。完成了一些搜索后,我在超级用户论坛上找到了与HiDPI相关的答案。

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

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

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

no code to accompany this JSFiddle

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

我应该减小菜单字体的大小,并影响网站的设计,以保证菜单正常运行吗?

我需要为遇到此问题的每个人解决问题,而不仅仅是我。

有没有人知道修复?

2 个答案:

答案 0 :(得分:0)

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

<强>视口

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

width属性控制视口的大小。它可以设置为特定数量的像素(如width=600)或特殊值device-width值,这是CSS像素中屏幕的宽度,比例为100%。 (有相应的高度和设备高度值,这对于具有根据视口高度更改大小或位置的元素的页面可能很有用。)

     

initial-scale属性控制首次加载页面时的缩放级别。 maximum-scaleminimum-scaleuser-scalable属性控制用户如何放大或缩小页面。

Viewport MDN

<强>字体

* {
  font-size: 16px;
}

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

这两个一起使用应该有助于确保所有浏览器和设备类型按预期呈现您的页面。

答案 1 :(得分:0)

您可以使用检测像素密度的媒体查询并更改此dpi的字体大小,这样,没有错误的用户不会受到影响。