I realise this doesn't add anything new to the issue as such, but I was using a laptop to develop a website and had to abandon using Firefox Developer Edition due to a lack of this feature. Developing on a laptop and previewing for larger screens just isn't feasible because navigating the site, and seeing elements in their intended emphasis and proximity within the viewport isn't possible.

If there's anything else I can add to help, or in any way escalate this issue then happy to do so.

As a frontend developer the use cases for this are almost infinite, this is one of the most used features i have in chromium (can't say i really realized that until i didn't have it):

• testing different screen resolutions, especially ones larger than my laptop screen. Or realistically, almost ANY screen.. since i also have devtools open next to any device I'm emulating.. making my max testable resolution about 1300x
• comparing multiple screen sizes/ layouts side by side (i realize there are extensions / services for this as well)
• investigating layouts, such as grid and flexbox placements, while still maintaining the ability to click on elements within the viewport to inspect them (now about half of them could be hidden by the devtools window)
• resizing various resolutions to observe layout changes at breakpoints. this is tedious and / or impossible with the current device emulation arrangement.. I end up just dragging an edge of the device behind the devtools window and not being able to really observe much of anything.

In addition to making things smaller, it is also nice to be able to zoom in order to inspect strange small web page artifacts that are otherwise hard to see / unclickable.

• Testing tablet resolutions that are in portrait orientation, these often have a greater vertical dimension that most desktop screens ( > 1000px effective pixels, they are dual DPI). factor in a toolbar across the top of FF, a menu bar in my OS and there is no way to view any tablet resolutions completely in portrait mode on a 1920 x 1080 screen.

The Chrome DevTools actually have two different but related options to fit the viewport into the visible area. One is called "Fit to window" which is a one-off option to adjust the zoom of the viewport manually to fit into the visible area. And the other one is called "Auto-adjust zoom" which adjusts the zoom whenever the "Dimensions" option is changed.
Also, the zoom within their responsive design mode seems to be independent of the actual page zoom.

The question is whether to match this and provide the same functionality or do it differently. I would say that in a first step the RDM zoom should be made independent of the page zoom. In a second step a fit-to-visible-area feature as discussed here should be added. And I could imagine to have only one "Auto-adjust zoom" option that always automatically adjusts the zoom of the RDM viewport to fit into the visible area, i.e. also when the browser window is resized.

In addition to that, the Chrome DevTools resize the viewport automatically to fit into the visible area when "Responsive" is chosen from the Dimensions drop down. This might also be covered by this change to change the zoom level. Or it could be implemented as in Chrome by changing the viewport size instead of its zoom level.

Sebastian

Agree that making RDM zoom independent of regular page zoom a first step. You can zoom in/out using Ctrl/Cmd-+/- keys, but the RDM window is centered to the center of the viewport instead of the center of the RDM window. See screenshot to see what i mean.