自从将我的电脑更新到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的机器都会出现这种情况。如果问题是一个bug,我该如何解决它?
这是一个JSFiddle,它仍然在我的屏幕上显示一个损坏的显示。
no code to accompany this
JSFiddle
(请记住,如果您没有遇到错误,这可能会正确显示。如果错误存在,最后一个菜单项将出现在第一个菜单项下方)
我是否应该减小菜单字体的大小,并影响网站的设计,以确保菜单正常运行?
我需要为每个遇到这个问题的人修复,而不仅仅是我。
有人知道解决办法吗?
您的最佳选择是确保视口设置为默认值0,并且为所有元素设置了核心字体大小。
视口
<meta name="viewport" content="width=device-width, initial-scale=1">
width属性控制视口的大小。它可以被设置为特定数量的像素,如
width=600
,或者被设置为特殊值device-width
值,该值是以100%的比例以CSS像素为单位的屏幕宽度。(有相应的高度和设备高度值,这对于具有根据视口高度更改大小或位置的元素的页面可能很有用。)
initial-scale
属性控制首次加载页面时的缩放级别。maximum-scale
、minimum-scale
和user-scalable
属性控制如何允许用户放大或缩小页面。
Viewport MDN
字体
* {
font-size: 16px;
}
这将在所有元素中将font-size
设置为16px,并将覆盖用户浏览器的默认字体大小
这两种方法结合使用应该在某种程度上有助于确保所有浏览器和设备类型都能按预期呈现页面。
您可以使用mediaquery来检测像素密度并更改此dpi的字体大小,这样,没有出现错误的用户就不会受到影响。