為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

How to go back to the old Responsive Design Mode interface from Firefox Quantum

more options

The new Responsive Design Mode is significantly less usable than the old one.

There are many annoyances in the new interface, but the worst is the centring of the viewport in the window, so that when you resize it, everything moves, and you can't see how your design is responding to the new size, since _everything's_ moving. Maybe centring looks cool, but Responsive Design Mode is for designers and developers, it doesn't need to look cool, it needs to work!

You used to be able to get the old Responsive Design Mode - the one that had the viewport aligned top-left - by disabling multi-processes. This no longer works in Firefox 57.

Is there any way to get back the old Responsive Design Mode? Or, if not, configure the new one _not_ to centre the viewport in the window? I do a lot of responsive web design and development, so this is a real showstopper for me.

Thanks,

Mark

The new Responsive Design Mode is significantly less usable than the old one. There are many annoyances in the new interface, but the worst is the centring of the viewport in the window, so that when you resize it, everything moves, and you can't see how your design is responding to the new size, since _everything's_ moving. Maybe centring looks cool, but Responsive Design Mode is for designers and developers, it doesn't need to look cool, it needs to work! You used to be able to get the old Responsive Design Mode - the one that had the viewport aligned top-left - by disabling multi-processes. This no longer works in Firefox 57. Is there any way to get back the old Responsive Design Mode? Or, if not, configure the new one _not_ to centre the viewport in the window? I do a lot of responsive web design and development, so this is a real showstopper for me. Thanks, Mark

被選擇的解決方法

You can only get the new design when multi-process is enabled. Still works for me with multi-process disabled.

What do you see with multi-process disabled?

You can look in "Help -> Troubleshooting Information" (about:support) to see the current multi-process state.

  • "Help -> Troubleshooting Information" -> "Application Basics":
    Multiprocess Windows
    Web Content Processes

You can disable multi-process windows in Firefox by setting these prefs to false on the about:config page.

  • browser.tabs.remote.autostart = false
  • browser.tabs.remote.autostart.2 = false

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

從原來的回覆中察看解決方案 👍 1

所有回覆 (11)

more options

選擇的解決方法

You can only get the new design when multi-process is enabled. Still works for me with multi-process disabled.

What do you see with multi-process disabled?

You can look in "Help -> Troubleshooting Information" (about:support) to see the current multi-process state.

  • "Help -> Troubleshooting Information" -> "Application Basics":
    Multiprocess Windows
    Web Content Processes

You can disable multi-process windows in Firefox by setting these prefs to false on the about:config page.

  • browser.tabs.remote.autostart = false
  • browser.tabs.remote.autostart.2 = false

You can open the about:config page via the location/address bar. You can accept the warning and click "I accept the risk!" to continue.

more options

Thanks cor-el... that does it!

I'd tried to change those preferences based on other posts, but hadn't quite got it right.

Thanks for giving such clear instructions!

more options

Another solution is to edit userContent.css, i have created a gist for this:

https://gist.github.com/mtness/039b14943a40099fb1bc977e23cce5b3

much more usable now, no messing around with other settings.

more options

That's a great alternative, one that doesn't require disabling multi-process windows, thanks mtness!

It fixes the problem with the resizing beautifully. Is there any way to make the background darker, too? I've heard other designers say that they find the bright white distracting.

more options

Thanks mark, I appreciate it!

Do you mean the unused background #2A2A2E? Yes, of course - just add 'background-color: #000 !important;' to #app

The bright white in my screenshot is just the default blank html background - one could adjust that, toio, but it would affect every page.

more options

Ah, yes, I did mean the bright white background. I can see that it wouldn't be great to change that if it would affect every page. Thanks again!

more options

I agree that the new design lacks the functionality of the previous version.

Please see this video I've created that outlines some of the flaws:

https://www.youtube.com/watch?v=oWZ5JvDFIp8


Let me know what you think, and if any Mozilla devs are here reading this can we please bring the old version back?

At least allow for the ability to enable it if we choose.

Thank you

more options

I have to agree with joshfromlondon's video.

I'd add that committed Firefox users like joshfromlondon and me don't want to complain, we just want Firefox to get better and better, and feel frustrated when a change like the new Responsive Design Mode makes it a whole lot less usable for us in our day-to-day work.

As Josh says in his video, the old Responsive Design Mode was so awesome!

more options

Mark.J.J said

we just want Firefox to get better and better, and feel frustrated when a change like the new Responsive Design Mode makes it a whole lot less usable for us in our day-to-day work.

Thanks Mark!

Check out these design concepts I created today:

Image Album: https://imgur.com/a/hEtdf

Video: https://youtu.be/t9MfQKjHrmc

Let me know what you think

由 joshfromlondon 於 修改

more options

Hi Josh - Great work, I like it a lot. Especially your remarks on the curent state just nail it!

I just found out another annoying behavior: when switching between RDM an default view and back again, the "selected device" is forgotten and the viewport is reset to default.

It would be nice if the selected setting is saved.


One other thing is not quite clear to me yet: How should the toolbars behave when the "rotate"-Button is clicked and the viewport expands or contracts sideways?

I will touchup my userContent to reflect your design soon - but I don't know how to update the other necessary features.


Best regards, M

more options

Thanks M!

Yes great point about the "Last View" resetting, something I did notice as well but should have mentioned, so thank you for bringing that up. Yes absolutely the last view should take effect as it did in the previous version of RDM.

How should the toolbars behave when the rotate is pressed? The toolbar should remain fixed in the upper left, in my opinion. See attached images for examples.

In a perfect world, I'd have the new RDM look like my examples, but I do understand that's my preference and we all have unique tastes, that's why personalized options exist.

However, I do strongly believe my design concepts would be more desired by web developers. The function is there, the toolbar is bigger (yet takes up less screen real estate) and is designed for greater function in a more practical layout.

Looking forward to your userContent.css updates!