2

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).

Trial4life
  • 143
  • 1
  • 12
  • Although there are many factors that may cause this behavior, can you please share your html as well where you faced such problem. – Rajan Benipuri Oct 30 '17 at 13:17
  • Your trouble come from browser rendering ... you can override the browser layer with a real winform application ? – GGO Oct 30 '17 at 13:18
  • Devices (particularly phones and tablets) have a hardware resolution that may be different from the resolution reported by browsers. There's really nothing you can do about it, and the best approach is to trust the device manufacturers to have done the right thing. – Pointy Oct 30 '17 at 13:18
  • Use `rem`, It will show the height according to device and your based font-size – Zahidul Islam Ruhel Oct 30 '17 at 13:19

2 Answers2

4

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.)

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • Thanks for the help. I know that the following question is much more complex... but what would you suggest me to do in order to adapt the website to a smartphone browser? In this case the device pixel ratio is much higher than the notebook. Is it convenient to redesign the entire css only for mobile devices? – Trial4life Oct 30 '17 at 21:32
  • The pixel ratio is not really the issue with mobile design; as I said in the answer you can mostly ignore that and let the browser take care of it for you. It is important, though, to design a layout for your site that will be usable on smaller screens; that's typically done with @media queries set for different screen sizes (*not* pixel ratio.) I wouldn't call it "convenient", but I would call it necessary. – Daniel Beck Oct 30 '17 at 21:40
1

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

Vladyslav Didenko
  • 1,352
  • 1
  • 14
  • 19