看起来 Gecko、Trident 和 Webkit 在高分辨率屏幕上显示网页的方式不同。 Chrome 和新 Opera 等 Webkit 浏览器会缩小页面以匹配屏幕的像素分辨率。然而,这可能会使小文本很难阅读。
另一方面,Firefox 和 Internet Explorer 似乎有一些默认尺寸,如果分辨率较大,它们会假装屏幕分辨率较低,而是使用额外的像素来增强抗锯齿功能。
现在的问题是:如何使我的网站大小在这些不同的浏览器中匹配?我的 1920x1080 显示屏上的差异约为 20%(您必须将 Webkit 浏览器放大到正常尺寸的 120% 左右才能匹配其他浏览器中的视图)
是否有一些CSS hack滥用@viewport或其他方法来确保页面在浏览器中看起来相同?
好的,假设您已经使用了视口元标记
<meta name="viewport" content="width=device-width, initial-scale=1.0">
将以下内容添加到您的 CSS 中:
html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
也可以看看MDN-文本大小调整 https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)