Question

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

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

现在的问题是：如何在这些不同的浏览器中获取我的网站大小？我的1920x1080显示器的差异大约是20％（您必须将Webkit浏览器缩放到正常大小的120％以匹配其他浏览器中的视图）

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

Answer 1

尝试在<head>标记

中添加此元标记

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

使用CSS重置尝试在所有浏览器中获得一致的行为。

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

以'em'或'％'等单位使用相对字体大小是另一种解决方案。

Answer 2

好的，假设您已经使用了视口元标记

<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

Answer 3

我目前没有HiDPI显示器可供测试，但这是我的建议：

你提到过使用相对单位，我认为这是一个好主意。与其他人提到的一样，使用元视口标记来设置宽度也是一个好主意：<meta name="viewport" content="width=device-width, initial-scale=1">。

我要添加的是针对不同像素密度的媒体查询。例如，我目前正在我的一个项目中使用它：

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
    /* style here */
}

您也可以将其与绝对宽度查询结合使用。

一些参考文献：

... 或者您可以在max-width

上使用body

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

3 个答案: