1

I try to understand the difference between device pixels, css pixels and device-independent pixels. And frankly speaking, I'm a little bit confused.

Yesterday I tested my site on two devices. There were my smartphone (pixel-ratio: 2.5) and laptop (pixel-ratio: 1). What did I get? My smartphone displayed everything smaller and my laptop displayed everything bigger. For example, I have this element.

enter image description here

And as a result, it was 1.6cm on my phone and 2.5cm on my laptop.

(And of course, I know about scaling and viewport. So I took care of that with <meta name="viewport" content="initial-scale=1">. So, everything in my site displays in the right scale.)

So, what does this size difference mean? On the some sources I read that the size of the element on my site doesn't depend on the screen resolution of my device. For example:

If I had designed a webpage to be 320 pixels wide (which used to be the full width of an iPhone 3) would it now only be half the width of the iPhone 4 screen? That wouldn’t be good, because the content would be too small at half the size! Luckily that wasn’t the case, because the 320 pixels that are coded into HTML/CSS no longer have a one-to-one relationship with all displays: On 1x displays: 1 pixel width in HTML/CSS = 1 pixel wide on screen On 2x displays: 1 pixel width in HTML/CSS = 2 pixels wide on screen The browser knows the resolution of the display, and translates HTML/CSS pixels into hardware pixels. The source

I used to think that CSS pixels, which I use to establish my width/height, are independent of physical pixels, which are responsible for resolution. That's why I thought that 100 CSS pixels always occupy the same space on different devices with different resolution.

Can someone explain to me why my element displays smaller and bigger on the different devices? Thank you!

Eva
  • 284
  • 3
  • 13
  • You need to add pixel ration in media query... and according to that media you need to write css... or you can read this... https://stackoverflow.com/questions/10529354/media-queries-and-device-pixel-ratio – Ishita Ray Oct 18 '20 at 14:06

2 Answers2

3

This is because all devices have their own pixel size. For example 1px in a laptop and another 1px in a smartphone are not the same in terms of size. The 1px in the laptop is bigger than the one in the smartphone. This is why it is recommended to use relative values such as vh, vw, em and rem for sizing elements. This is because this values will help to keep your elements from changing their sizes in different devices. For example instead of styling your font size in px you should use em instead to keep your font size allways equal in all devices. If you use a px value for your font size, the size of your font will change in different devices because each device has a different pixel size.Relative values will not change, if you did 100vw to your element it will always occupy the full 100% of your screen width no matter the type of device and eg.

David Ngumbu
  • 134
  • 9
  • It looks like you're talking about physical pixels. One physical pixel can be various sizes: it can occupy 50 CSS pixels or 100 CSS pixels, for example. CSS pixels, in turn... **Pixels, abbreviated as "px", are also a unit of measurement commonly used in graphic and web design, equivalent to roughly 1⁄96 inch (0.26 mm). This measurement is used to make sure a given element will display as the same size no matter what screen resolution views it.** - [SOURCE](https://en.m.wikipedia.org/wiki/Pixel) – Eva Oct 18 '20 at 18:22
  • Then, that means when we establish some width/height in CSS, we refer to the physical, not CSS pixels? Right? Because CSS pixel is always 0.26mm. – Eva Oct 18 '20 at 18:23
  • When relative values are used to size elements then that is the case.Because they are relative to the physical pixels – David Ngumbu Oct 18 '20 at 18:31
0

I was searching for the reason of the different behavior when opening a website on a laptop and a smartphone, both with the exact same resolution. I landed here and not really got an answer. But then I found a medium article that explains it good enough to understand the concept, and I finally got it. Make sure to check it out if you have landed here for the same reason as mine!

Here is an important part of the article:

What is the Real Difference between CSS Resolution and Device Resolution?

The CSS resolution is used for measurements in the CSS Rules, and the Screen Device Resolution is the actual number of pixels on the screen.

Besides the two resolution types, there is also Density Display, which defines the ratio between the Screen Resolution and the CSS Resolution, and is different in high-density screens.

Mohawo
  • 47
  • 7