Fixing site size in FireFox vs Chrome on large screens

Question

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?

Answer 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%; 
}

See also MDN - text-size-adjust