window.innerWidth in Chrome's device mode

Question

When in google chrome\'s device mode, what does window.innerWidth return? Is it the viewport of the device (plus any scroll bars)?

I\'m getting different values for

Answer 1

We're currently having success with something like:

    const widths = [window.innerWidth];

    if (window.screen?.width) {
      widths.push(window.screen?.width);
    }

    const width = Math.min(...widths);

The conditional check is there because I'm not sure how widespread the screen width API is. You may need to adjust this not to use certain newer JS features depending on what devices you are targeting/your build process.

This could potentially go a bit weird if you have a window that is wider than the screen, but for us that isn't a problem.

This gives us a width that matches the one at the top of the Responsive screen tool, even when contents overflow horizontally. This is important for us because we needed the UI to change in order to prevent that overflow, but the overflow was interfering with the width number we used to trigger the adjustment.

I'm not sure if this is important, but we are also using: