What is the difference between screen width and device width?

Question

css

This is not the first time I hear mentions in articles and in communication with layout designers that there is a screen width, but there is also a device width. And these both properties are even used in css. Tell me, what is the difference between them and how are these two properties involved in the development of adaptive layout? Why isn't just screen width enough?

Answer 1

As far as I understand, you mean physical extension and software

Answer 2

The fact that on mobile there is nothing in common between them. That is, you can set the viewport to be 800px wide even though the display is FHD.
On mobile, this is generally difficult, but the main point is that the pixel on the display is not necessarily equal to 1px in CSS.
You can tell the browser that the entire width is not what it thinks it is, but 800 pixels. Thus, all elements of the site are relatively easily enlarged (if they are vector, then they do not lose their quality), some elements are hidden / rearranged and a mobile version of the site is obtained.

Answer 3

To find out how it is on your mobile phone (computer) in fact, I have a special test www.cotonti.mobi/aa.html
Recently, life began to spoil the devicePixelRatio of such handsets with this little, but there are more of them. Unfortunately, this will be a big problem for so-called responsive sites.