CODEWITHSUNDEEP
htmlcssresponsive-design
user2991438
user2991438

Reputation:

How does a CSS width react to different screens?

When I use

.class { width: 800px; }

what does it actually mean?

When I view it on my laptop screen, it shows up exactly 800 pixels wide. When I view it on my tablet screen, it shows up as 1600 pixels wide. I am guessing because my tablet might have a higher pixel density. However, the physical (when compare side-by-side) width of the element if much smaller on the tablet than on my laptop

So, my question is: When I define a dimension in CSS to an HTML element, what is the reference? How is it computed or scaled on different displays?

Upvotes: 1

Views: 417

Answers (1)

Guffa
Guffa

Reputation: 700152

The reference is a logical coordinate system that might be scaled in relation to the physical screen.

It's most common on a PC that the scale is 1:1. However as screens get larger it's becoming more common with computers that have scaled up display, which may also affect the browser.

The user can also zoom in the browser, which natually affects the scaling.

Devices like tablets and phones usually have a 2:1 scaling in the browser, sometimes even more. That means that the browser reports a smaller screen size, and everything is scaled up. This also affects the media queries, so even if the physical screen is larger, your CSS might not apply as the media query uses the screen size that the browser reports.

Also, if you don't lock the viewport using a meta tag, the mobile browser will scale the page to fit the screen, so whatever page width you specify will show up the same size.

Upvotes: 1

Related Questions