6

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?

Qqwy
  • 5,214
  • 5
  • 42
  • 83
  • 2
    Could it be that you are just looking for the meta viewport tag ``? – Netsurfer Apr 21 '14 at 12:28
  • Unfortunately, it is not. This does not resolve the problem (although it does help on mobile devices with other problems unrelated to this one) – Qqwy Apr 22 '14 at 14:28
  • The only 'solution' I found that might work so far is to change all pixel values to relative values (e.g. percent or em), and resize the body to another size in certain @media screen conditions – Qqwy Apr 22 '14 at 14:30
  • Could it be related to this new "feature" that Firefox added in 2013? http://superuser.com/questions/804949/why-does-firefox-interpret-100-zoom-differently-to-other-browsers – Costa Oct 14 '16 at 01:26
  • In 2021 this is still a big problem, using Bootstrap 5. Make the zoom on Firefox 120% and it will look like Chrome! But how to fix this in the HTML? – David Spector Apr 22 '21 at 18:04
  • See nice workaround at https://stackoverflow.com/questions/56770010/how-to-adjust-the-zoom-of-website-at-different-browser-at-different-screen-size . – David Spector Apr 27 '21 at 11:37

3 Answers3

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.

Leo T Abraham
  • 2,407
  • 4
  • 28
  • 54
  • This helps to make the site look similar on different mobile devices, but does not help on Desktop, which is the target platform of this issue. – Qqwy Apr 22 '14 at 14:31
  • @Qqwy I have edited my answer. Please try the solution. – Leo T Abraham Apr 23 '14 at 04:30
  • I use Bootstrap 5, which is supposed to look the same between Firefox and Chrome. But to look the same, I have to zoom Firefox to 120%. I have tried using `` and `` in the HEAD section, but neither works. – David Spector Apr 22 '21 at 17:59
  • See nice workaround at https://stackoverflow.com/questions/56770010/how-to-adjust-the-zoom-of-website-at-different-browser-at-different-screen-size . – David Spector Apr 27 '21 at 11:37
2

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

Netsurfer
  • 5,543
  • 2
  • 29
  • 34
  • This fails for me. Also, `html { font-size: 100% !important; }` fails. My site uses Bootstrap 5, which is supposed to look the same. – David Spector Apr 22 '21 at 18:02
  • See nice workaround at https://stackoverflow.com/questions/56770010/how-to-adjust-the-zoom-of-website-at-different-browser-at-different-screen-size . – David Spector Apr 27 '21 at 11:37
0

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:

... Or you could use a max-width on your body

Daze
  • 478
  • 5
  • 17