Fixing site size in FireFox vs Chrome on large screens

问题

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?

回答1:

OK, so assumed you already use the viewport meta tag

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

add the following to your CSS:

html {
    font-size: 100%;
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}

回答2:

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.

回答3:

I currently don't have a HiDPI display to test with, however here's what I propose:

You've mentioned using relative units, which I think is a good idea. Like others have mentioned, using the meta viewport tag to set your width is also a good idea: <meta name="viewport" content="width=device-width, initial-scale=1">.

What I would add is media queries for different pixel densities. For example, I'm currently using this in one of my projects:

@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 */
}

You could also combine this with absolute width queries.

Some references: