How to present actual device screen size in Firefox responsive design mode?

Question

Using Firefox Dev Tool window to debug HTML graphics, how do we get the real size of emulated devices?

I can't seem to figure this out or find information.

I want to be as clear as possible here:

If I put an iPad 2 over my laptop screen, it is clearly smaller in width or height (in both horizontal and vertical orientation) than what Firefox presents on screen.

This is most clearly visible with phones; the phone emulation goes off screen which is 768px in height.

F.ex. sure, iPad 2 is 1024x768, but the emulation frame takes up almost a full horizontal screen space in horizontal orientation on a 1376px width laptop screen.

EDIT about:config layout.css.devPixelsPer... thing makes it smaller, and for DPR 1 devices makes it more realistic, however, DPR setting for custom devices doesn't change a thing. (why is it there).

Google DevTools behaves the same (Pixel density does nothing)

Here's a screenshot

Obviously, I'm comparing the screen area, not the whole phone, sorry.

Answer 1

You're never going to be able to do exactly what you want. Firefox gives an approximation, so iPhone 11 Pro with 1125 x 2436 pixels is displayed in FF RD mode as one third that at 375 x 812 with DPR = 3. That brings the rendering on screen similar to the physical iPhone 11 size.

The problem with that is that you're now using one pixel on the PC screen to represent 9 pixels on the phone. Text and everything else is going to be very fuzzy. So the goal of checking legibility is not possible (assuming they don't start making PC screens with the same pixel density as phone screens).

On top of that Firefox isn't accounting for the actual pixel density of the PC screen (DPR 3 is an approximation). That phone representation is going to be bigger on a 12" screen at HD res than on an 11" screen at HD (same number of pixels on the 12", they're just bigger). As RaoulU noted in another answer here you can adjust browser zoom to account for that.

Most developers are going to want to see how their design lays out at the magnified DPR 1 and legibility should be reasonable on the phone, but HAS TO BE checked on a phone. It does seem strange that FF doesn't let you toggle DPR once a device is chosen, but there are probably issues with media queries. While FF is showing 375 for width, obviously your media queries have to be working off of 1125. (It's bad design though. I see no reason to show reduced dimensions when it would be nice to see phone pixels to decide where your media queries should fall. And the DPR is grayed out for a device and then has no effect on custom resolutions.)