CODEWITHSUNDEEP
javascripthtmlcssresolutionpixel
Trial4life
Trial4life

Reputation: 141

HTML & CSS: fixed pixel height seems to be rendered differently in diffent screens / devices

I have set a fixed height for a div, let's say:

div.box {
   height: 250px;
}

Using a tool (Meazure) which measures the pixels of the screen, I've noticed that on my desktop PC, which has a monitor of 1680x1050 pixels resolution, the pixels of the box are 250px (the right value); however, in my laptop, which has a 1920x1280 resolution display, the pixels measured using Meazure are different! It shows 539 pixels...

The same thing happens for offset values given in pixels... I notice different behaviours among different screens and devices (on my smartphone this effect is much more amplified...)

How can I set a "fixed" value which will appear the same for every device?

(Note: I don't want to use 100% for the width, since I want the box to have a fixed value even after resizing the window).

Upvotes: 2

Views: 1676

Answers (2)

Daniel Beck
Daniel Beck

Reputation: 21485

How can I set a "fixed" value which will appear the same for every device?

That's the thing, though: a "fixed" pixel value wouldn't appear the same on every device, because high-density screens are a thing that exists.

That 250px box that looks fine on a 72ppi screen would be itsy-bitsy on a high density 300ppi screen (specifically it'd be 24% of the intended size.) Browsers compensate for this using the device pixel ratio to adjust the specified pixel value to an appropriate size for that screen on that device. (Your 'meazure' tool doesn't appear to be taking this pixel ratio into account, which would seem to rather limit its usefulness, as it will only give accurate results on a traditional low-density screen.)

In theory you could undo this by multiplying the size of an element by the inverse of the current devicePixelRatio, but the result would be the opposite of what you want: the elements would have the same number of physical pixels, but would look completely different sizes on each device.

In practice it's mostly safe to ignore that this is happening at all and trust the browser to adjust your specified sizes correctly. (Take measurements using a density-aware tool, or the browser's own developer tools.) The only case where you really need to take this into account is if you include high-resolution bitmap images for use on higher-density screens; in those cases you'd use @media queries to determine which image the browser should use, such as

@media (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi) { 
    /* 2x-res images here */
}
/* low-res images here */

(the -webkit prefixed value is, of course, vendor-specific; resolution is the not-yet-universally-supported standard.)

Upvotes: 4

Vladyslav Didenko
Vladyslav Didenko

Reputation: 1641

I would first suggest to first check actual CSS properties. Right button -> inspect element and to see if on your PC and laptop div.box height is actually set to 250px

Maybe due to different resolutions, different styles are being applied. If you have a www. page to look at, post it in comments

Upvotes: 1

Related Questions