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

user_3172879 0
Viewed 1157

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

Responsive Design Mode rendering compared to real device dimensions (iPhone) (scaled to 50 percent)

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

dpi html
2 Answers

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.)

user_37366020

I have noticed the same. I'm on a iMac 27", and the emulated screen sizes (for iPhone, ipads, but also for the MacBooks) are always much larger then the actual physical screen. This makes Firefox Developer useful for testing responsive changes in layout and stuff like that, but much less so for judging size of typography and other visual elements. There is a work-around: you can zoom in or out with Cmd -/+ or through Menu > Zoom. The zoom percentage is shown in the URL box, to the right. Increments are 100, 90, 80, and then weirdly enough 67%.. And lo and behold, 67% matches the screen of my real iPhone 6s exactly. But for a MacBook Air 13" 80% is much closer to the real size. And strange enough for an iMac 21" the opposite is true: there I need to zoom in to 110% to get close to the actual size. So it's difficult to understand what is going on, but you can mitigate the flaw a little.

user_158512250
Related