Web Inspector: Ability to emulate mobile viewport changes in responsive design mode

• Component: Web Inspector
• Status: NEW ---

[Anthony Frehner]

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](https://github.com/w3c/csswg-drafts/issues/4329) some of the issues with them, and it's exciting to see [Safari Technical Preview release 135](https://developer.apple.com/safari/technology-preview/release-notes/) 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](https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4#dynamic-viewport-units) (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](https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-542420036)).

However, if you [play around with the new units](https://codepen.io/afrehner/pen/ZEJVbaE) 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](https://xleeg.csb.app/) on your phone and on your desktop to see the difference. (Source code found [here](https://codesandbox.io/s/hopeful-shape-xleeg?file=/index.html))

## 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?

----

Related Chrome request https://bugs.chromium.org/p/chromium/issues/detail?id=1271608
Related Firefox request https://bugzilla.mozilla.org/show_bug.cgi?id=1741940

[Radar WebKit Bug Importer]

<rdar://problem/85753996>