Search code examples
htmlcssgoogle-chromeviewportpixel

Pixel height different even with viewport set

tl;dr: All browsers on a single machine (Chrome, Firefox, IE 11) consider 118px to be something higher than programs such as IrfanView, Photoshop or even MsPaint on the same machine (Lenovo Yoga with Windows 8.1) and I don't know why.

I'm coding a webpage from a photoshop file. It has a menu that's 118 pixels high.

Simple CSS. See the jsFiddle. nav { height:118px; width:100%; border:1px red solid; }

I complete the webpage, make it responsive, etc. etc. Everything looks good.

Now I load the webpage on my Lenovo Yoga with resolution 1440x900 which my client uses on his Mac.

And I see the box is somehow higher but Chrome still says it's 118px high. But when I take a screenshot and measure it then IrfanView says it's something about 146px. On the same laptop with the same screen resolution.

pixel height

Now I understand that screens have different pixel sizes but why the hell Chrome measures pixel size differently than MsPaint, IrfanView and Photoshop on a same machine? I have read about what units should be used for what purpose here on stack overflow and I still don't understand why 118px in Chrome and IE 11 renders something higher than 118px in MsPaint.

My website even has the meta viewport tag set with which I understand the pixel resolution should not actually differ much.

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

On my desktop with a classic LCD 1920x1080 there is no difference at all. 118px in Chrome equals 118px in any graphical software (photoshop, mspaint, irfanview) and that equals 118px when in development mode.

Solution

  • I learned about device pixel ratio which is the source of my troubles...apparently my desktop ratio is 1 while on my Yoga it's 1.25 and on my client's Mac it must be something similar.

    On my desktop, CSS 118px is equal to 118px on screen ...while CSS 118px equals to 147px on Yoga notebook screen.