How to stop chrome responsive inspector from changing the zoom?
I have had this issue a few times now. I'm unsure what causes it, but i've found that you can fix it by selecting "Restore to defaults" in the Toggle device toolbar menu.
Here's how I finally managed to resolve this issue in 5 steps, I hope it helps:
Click
"Toggle device toolbar"to bring the toolbar up
Click the 3 dots on the right hand side of the device toolbar
Click the option
"Add device type".This will add a new dropdown to the device toolbar. From there you can select
"Desktop (touch)"
Problem solved.
To disable scaling and zooming you must add this inside the <head> tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
The minimal <meta> tag (which doesn’t disable user-controlled scaling) is:
<meta name="viewport" content="initial-scale=1" />
It’s not a Chrome problem.
I asked this question a long time ago, and today I noticed a change in Chrome. I am not sure when this was introduced, since I haven't used the responsive options as much, but on Version 73.0.3683.86 (Official Build) (64-bit) there's now an option called "Auto-adjust zoom", and it was checked (enabled) by default. I unchecked it, and now the zoom will no longer change when the screen is resized.
You can access this option by clicking on "100%" next to the screen size, in the responsive screen. See image below:
I've reported this bug to Chromium.
Here's the link: https://bugs.chromium.org/p/chromium/issues/detail?id=1129880#c2
I've found the reason why this happens as well as a "mitigation": set the height to empty string: ""