Does screen resolution impact on the size of my site's elements?

0
votes

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!

1
htmlcsssizescreenpixel
You need to add pixel ration in media query... and according to that media you need to write css... or you can read this... stackoverflow.com/questions/10529354/… - Ishita Ray

1 Answers

2
votes

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.