Hi,
I’m very confused about the responsive design mode from devtools (firefox).
If you look at the iphone 11 pro for example, you see that the display has 2436 x 1125 pixel.
However, if you open the iphone 11 pro simulation of devtools
and look at the top of the picture, you see 375 x 812 and according to
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
this should also be pixels.
I just don’t get it. Would be happy if anybody could explain this?
Hi,
if I understand your question correctly, it is about the retina display.
If you add a div with width: 1125px you’ll see that is is by far wider than your viewport (display).
CSS assumes that a display displays 72 pixels per inch. The iPhone 11 displays 326 pixels per inch. So CSS treats multiple retina pixels as one.
Ok, that already helped me!
2436 : 1125 is indeed the same as 812 : 375.
What I don’t get:
How can they say, the IPhone has a width of 1125px if a div with 1125px doesn’t fit in then?
I’ve never seen that. 1125x2436 px is the resolution, not the width/height.
Thanks so much, great article!
But still, it doesn’t answer me my original question:
When 375 x 812 (the numbers in devtools next to the Iphone 11pro model label) are not the pixels - what is it then ??
After reading the article, I understood this now, thanks 
In my post above I wanted to say I understand what the resolutions values are now, but I still don’t get what numbers devtools is showing me 
It shows you what your CSS evaluates to in the viewport. If the devtools say the viewport size is 375 x 812px, then it will respond to a media query like
@media (max-width: 375px) and (max-height: 812px)
If you set a div to width: 375px; height: 812px; it will take the full viewport of the device.
Aaah that makes sense…
And I guess, since 1125px : 375px = 3, if somebody is using this IPhone model, his IPhone will display him 3 pixels for each of the pixels devtools displays me, right?
And there’s a second thing what I really don’t get: If I compare my own Galaxy A12 with the viewport from the Iphone 11pro in devtools (take it in my hand and hold it in front of the simulation on my laptop) - the Iphone 11pro viewport is much wider. However, if I google the display sizes, my Galaxy has 6.50 inches whereas the Iphone only has 5.85 inches. ??
Per direction. It will rather be 9 Pixels in total: 3 in horizontal direction and 3 in vertical direction.
I’m working with chrome devtools - not Firebug, but I assume it applies for both:
The chrome devtools provide the dimensions of the device’s display: The display is not the viewport. There are browser panels that take space from the viewport and change the aspect ratio of the viewport.
That will be the screen diagonal, it does not tell you anything about the proportions of the device.