在大屏幕上修复FireFox vs Chrome的网站大小 [英] Fixing site size in FireFox vs Chrome on large screens
问题描述
似乎Gecko，Trident和Webkit有在高分辨率屏幕上显示网页的不同方式。 Webkit浏览器如Chrome和新的Opera会缩放页面以匹配屏幕的像素分辨率。但是，这可能会使小文本难以阅读。
另一方面，Firefox和Internet Explorer似乎有一些默认大小，如果分辨率更大，他们会假装屏幕有较低的分辨率，而是使用额外的像素来增强抗锯齿。
现在的问题：如何获得我的大小网站在这些不同的浏览器匹配？我的1920x1080显示器上的差异是大约20％（你必须将Webkit浏览器缩放到正常大小的120％，以匹配其他浏览器中的视图）
有没有一些CSS hack滥用@viewport或另一种方法来确保页面在浏览器中看起来一样？
< head> 标签中的元标记
=viewportcontent =width = device-width，initial-scale = 1>
使用CSS重置尝试在所有浏览器中获得一致的行为。
http://meyerweb.com/eric/tools/css/重置/
http：/ /developer.yahoo.com/yui/reset/
以em或％等单位使用相对字体大小是另一种解决方案。 / p>
It seems that Gecko, Trident and Webkit have a different way of displaying web pages on high resolution screens. Webkit browsers like Chrome and the new Opera will zoom the page out to match the pixel resolution of the screen. However, this might make small text very hard to read.
Firefox and Internet Explorer, on the other hand, seem to have some default size, and if the resolution is bigger, they will pretend the screen has a lower resolution, and instead use the extra pixels to enhance anti-aliasing.
Now the problem: How do I get the size of my websites to match in these different browsers? The difference on my 1920x1080 display is about 20% (you have to zoom Webkit browsers in to about 120% of the normal size to match the view in the other browsers)
Is there some CSS hack abusing @viewport or another way to ensure that the page looks the same across browsers?
Try adding this meta tag within your <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Use a CSS Reset to attempt to get consistent behavior across all browsers.
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
Using relative font sizes in units such as ‘em’ or ‘%’ is another solution.
这篇关于在大屏幕上修复FireFox vs Chrome的网站大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
