When working on responsive components or websites, I frequently find myself wishing that my desktop browser could better emulate how a mobile browser actually behaves - specifically, when it comes to resizing the viewport as you scroll up and down.
And yes, it's true that nothing beats using an actual mobile device to test your code, that doesn't mean that we can't make the desktop developer experience better.
These following cases are only some of the examples of where the desktop's "Responsive Design Mode" experience doesn't actually match how mobile browsers behave:
CSS Viewport Units
I've been working with viewport units, like vh, for a long time. I've even helped resolve some of the issues with them, and it's exciting to see Safari Technical Preview release 135 with support for the new *vh units such as lvh, svh, and dvh.
These units can subtly or even quite drastically change how your website looks and behaves - especially the dvh unit (which behaves as vh used to behave when it was first implemented, until it was determined that in most cases that's actually pretty bad behavior).
However, if you play around with the new units on your desktop browser (assuming you use a browser that supports them), nothing happens - even if you're in responsive design mode!
That's because your desktop browser doesn't change the viewport size, while the mobile version of your browser does. So the only solution is to have an actual mobile browser open to test your component or website. (Again, ideally you're doing this already. But it can slow things down if this is your only option to test.)
Window Resize Events
If you have an event listener for window resize events, you may not have realized that mobile browsers fire those events quite frequently as you scroll around - because your desktop browser doesn't change the viewport, even in responsive design mode. Test out this codesandbox on your phone and on your desktop to see the difference. (Source code found here)
Proposal
I think it would be a great improvement if desktop browsers' mobile responsive design mode had the ability to emulate the viewport changing sizes as you scroll.
Additional thoughts:
- Perhaps it could be turned on and off with a preference toggle?
- You (probably?) don't need to add the actual browser chrome to the emulator, you could just resize the window. At least for an initial first release
- Maybe it should only work when you have an actual device selected in the Device picker dropdown?
If you also think this would be helpful, please:
- Add a star to the Chrome issue
- Add a vote for the Firefox request
- Add a vote for the Safari request
Please refrain from commenting things like "+1" :)
Top comments (0)