Login/Register
Why does resizing the window behave differently from resizing the "responsive box" in chrome developer tools?
Asked Answered
javascripthtmlcssviewportgoogle-developer-tools
S

1

12

Yesterday I observed some really strange behaviour and wrote a looooong question on it. As @tacoshy correctly pointed out, the question lacked focus. I will therefore, in this post, focus on one single question:

Why does resizing the window behave differently from resizing the "responsive box" in chrome developer tools?

Preface

The <head>-element contain the following viewport meta-tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

Before any video shown below, the following have both been performed in Chrome-devtools
Settings > Preferences > Reset defaults and reload
and
The kebab-icon in the responsive view > Reset to defaults

The application.

The code can be found here. It's deployed and can be inspected here.

A React-application with a state (windowWidth) that is updated to window.innerWidth when the resize-event triggers. I also have a container div with min-width set to windowWidth. In short, the container should always have the same min-width as window.innerWidth. The container contains a div with min-width statically set to 400px.

The behaviour

When I only open chrome developer tools and resize the visible window by changing the width of the developer tools, this is the observed behaviour:

enter image description here

  • window.innerWidth corresponds to the size of the window.
  • The scale (from window.visualViewport.scale) remains at 1.

Now we try in Chrome developer tools responsive mode:

enter image description here

  • The width remains static (781px)
  • The entire scale of the viewport goes down.

Further investigations

  • window.visualViewport.width will produce nearly identical behaviour
    • (apart from width sometime shifting to a decimal-point value)
  • window.screen.width will produce a different but also erroneous behaviour:

enter image description here

  • The layout doesn't break until the screen becomes smaller than the cyan-coloured element (in the header with min-width: 400px). Then the container seem to shrink quicker and at this point we can also see how the scale starts to go down.
  • Setting windowWidth statically to 100vw produces exactly the same behaviour as above.

Solution to the weird behaviour

All of the examples above on the layout breaking have one thing in common: The scale starts to go down instead of the actual width of the viewport. So one could imagine that updating the viewport meta-tag to include minimum-scale=1 would solve the problem, and it does! Using

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, minimum-scale=1"
/>

Produces the following behaviour:

enter image description here

As you can see, the Scale remains at 1 and the layout doesn't break. In fact, adding minimum-scale=1 makes innerWidth, visualViewport.width and screen.width all produce the same expected behaviour in the responsive view of chrome developer tools.

Unfortunately solving that was not the question, the question is and remains:

Why does resizing the window behave differently from resizing the "responsive box" in chrome developer tools?

Edit

This strange scaling-behaviour is not mirrored when viewing the page in the Firefox developer tools responsive view.

enter image description here

Edit2

Similar questions

Does Mobile View in Chrome-Dev-Tools force scaling?

Exactly the same problem, solved by adding the meta-tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Which apparently did solve the problem in January 2020, but does not solve the problem today (as we cab see here).

Resize Chrome responsive mode window without changing scale

Also solved by adding:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

which is already present this time around.

Why is Chrome shrinking the view in responsive mode?

Exactly the same behaviour as this mine but the selected solution was a jQuery-hack. The poser also mentioned a similar scaling-problem when tilting your phone and then tilting it back again which I too have experienced (it goes away when adding minimum-width=1 to the viewport metatag).

Summary

It looks like this issue used to be solved by adding

<meta name="viewport" content="width=device-width, initial-scale=1.0">

but now requires

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

my question in that case remains

  • Why have they changed this?
  • What use is there for the developer to change the scale of the page when resizing the responsive window?
  • Is this a feature or a bug?

Edit3

Edge on the other hand does seem to mirror this behaviour.

enter image description here

Succuss answered 21/6, 2022 at 20:9 Comment(0)
P
2

There's a lot of things going on with this question, so it's hard to respond. But, after researching on my own (as I ran into this same question(s) tonight), I found the following details somewhat useful. I think the browser approximation of the default behavior of mobile devices, when no "meta viewport" tag, is somewhat a "best effort" to simulate a device behavior attempting to deal with desktop-oriented pages. Maybe this is helpful:

  1. Default Viewport Width for Non-Responsive Sites: Mobile browsers use a default viewport width that is wider than the actual screen of the device, typically between 800 and 1024 pixels, with 980 pixels being a common default. This width is used when the website doesn't have any instructions (like a viewport meta tag) telling the browser how to scale or size the content for different screen sizes.
  2. Purpose of Default Width: This default width is chosen to approximate the typical width of a desktop website. Without it, non-responsive websites (designed for desktops) would appear very small and be hard to read on mobile devices. The browser essentially renders the page as if it were on a wider screen and then scales it down to fit the mobile screen.
  3. Effect in Device Emulation: When using device emulation in Chrome DevTools without a responsive viewport meta tag, you might notice that the content is scaled as if it's being rendered on a screen that's 980 pixels wide. This is because the emulation is mimicking the behavior of a mobile browser handling a non-responsive site.
  4. Responsive Design and Viewport Meta Tag: In a responsive website, the viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">) instructs the browser to use the actual device width for rendering, rather than the default 980 pixels. This tag makes sure the content is sized and scaled properly for the device, eliminating the need for the default width.

Honestly, I think the Chrome (and Firefox et al.) team should be more detailed in the behavior of the emulation they provide, but understanding that there's a "we're gonna do the best we can" with no "meta viewport" tag is helpful for me. Once the <meta name="viewport"... is set, it should play much more consistently.

(Note: I'm watching this question, as I'd like to know more about these subtle behaviors that are inadequately documented)

Pastime answered 7/1 at 7:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.