css - 在大屏幕上修复 FireFox 与 Chrome 中的网站大小

Question

似乎 Gecko、Trident 和 Webkit 在高分辨率屏幕上显示网页的方式不同。像 Chrome 和新的 Opera 这样的 Webkit 浏览器会缩小页面以匹配屏幕的像素分辨率。但是，这可能会使小文本很难阅读。

另一方面，Firefox 和 Internet Explorer 似乎有一些默认大小，如果分辨率较大，它们会假装屏幕分辨率较低，而是使用额外的像素来增强抗锯齿。

现在的问题是:如何让我的网站大小在这些不同的浏览器中匹配？我的 1920x1080 显示器上的差异大约是 20%(你必须将 Webkit 浏览器放大到正常大小的大约 120% 以匹配其他浏览器中的 View )

是否有一些 CSS hack 滥用 @viewport 或其他方式来确保页面在不同浏览器中看起来相同？

Answer 1

好的，假设您已经使用了视口(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 - text-size-adjust