Responsive Design View Zooming

Chrome dev tools implementation of zooming in responsive design mode is quite useful. It’s easier to jump to zoom sizes, it’s a bit easier to see at a glance what the current zoom size is and when the response design view is closed the page zoom returns to the original size.

Would this be useful for anyone else? If so, is it possible to implement something like this in Firefox?

6 Likes

This is THE ONLY feature missing from Firefox that keeps me coming back to Google Chrome. There is this 5 years old bug open, still waiting for response (last comment is from a year ago).

I love Firefox, is such an awesome browser and in my experience superior to Chrome in every aspect, except in this tiny little thing that makes it SO hard for me to do my work. As a laptop only user, keeping Developer Tools open and trying to debug for larger device screen sizes in Firefox feels like such a terrible user experience that sadly makes me go back every to Chrome every single time.

3 Likes

Hey! it’s been six years now :partying_face: :birthday:

I’m still hoping that someday the mobile dev experience with Firefox will be at least on par with Chrome’s. Undoubtedly it must not be simple to implement this kind of feature, but it feels like it has been completely forgotten, even when it was announced on the roadmap on the same post that announced the new Responsive Design Mode for dev tools, 6 years ago.

2 Likes

Any update on this one? I would love to switch to Firebox if this is feature is implemented.

Seems like normal way of zooming in and out (i.e., Ctrl-Mouse-Wheel or Ctrl-+ and Ctrl–) not do what you want? It seems to for me, i.e., if the viewport is larger than the screen, you can zoom the whole thing - viewport and content - down so it fits.

Thanks to https://www.reddit.com/r/firefox/comments/hg88xz/how_do_i_adjust_zoom_level_in_responsive_design/

@Pritam_Shrestha this kinds of works, but it’s pretty clunky. Mainly because it doesn’t zoom from the center of the viewport, but from the left of the page. Meaning that the screen is centered on the complete browser viewport instead of just the screen of the device viewport. See screenshot to see what i mean.

Certainly, here’s a short list of software and tools that offer responsive design view and zooming capabilities:

  1. Google Chrome DevTools
  2. Mozilla Firefox Developer Tools
  3. Microsoft Edge Developer Tools
  4. Visual Studio Code (with relevant extensions)
  5. Sublime Text (with relevant extensions)
  6. BrowserStack
  7. Responsinator