[Webkit-unassigned] [Bug 233329] New: Web Inspector: Ability to emulate mobile viewport changes in responsive design mode

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=233329

            Bug ID: 233329
           Summary: Web Inspector: Ability to emulate mobile viewport
                    changes in responsive design mode
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: All
                OS: All
            Status: NEW
          Severity: Enhancement
          Priority: P2
         Component: Web Inspector
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: afrehner.work at gmail.com
                CC: inspector-bugzilla-changes at group.apple.com

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211118/b4a83df4/attachment-0001.htm>