CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
gdaniel
gdaniel

Reputation: 1464

How to stop chrome responsive inspector from changing the zoom?

When using the option "toggle device scrollbar" in the Chrome inspector, whenever you type a new width/height, the window zoom adjusts for that width/height automatically. This is an incredibly frustrating UI, as I don't want the zoom to adjust... ever. The only way to avoid this is by resizing the responsive window by dragging the side borders.

Is there a way to turn the auto zoom off?

My current version of chrome: Version 54.0.2840.98 (64-bit)

Upvotes: 98

Views: 78787

Answers (15)

Dmitry
Dmitry

Reputation: 337

Use Firefox, no problems there.

That is the only way I've got myself unblocked, no other solutions worked and the latest Chrome is still broken at the moment of writing.

Upvotes: -1

live-love
live-love

Reputation: 52366

Click on the toggle button circled in Red to switch between Desktop and Responsive.

enter image description here

Upvotes: 3

graham fletcher
graham fletcher

Reputation: 1

I was having this issue and I realised it was because my actual browser window was not big enough to incorporate the size without zooming. May just be me, but thought I would share just in case.

Upvotes: 0

Ahmad AlBashash
Ahmad AlBashash

Reputation: 31

after alot of searching about this problem,i figured out that probably it's a browser's bug... even tho there's a solution for this that works 100% with no problem here's the fix for this problem :

  1. open devtools
  2. open "Settings"

enter image description here

  1. Go to "Devices"

enter image description here

  1. click "Add custom device"

enter image description here

  1. set the sizes you want with and set a name for this device then click "add"

enter image description here

  1. you can see your new device in the list , this way the zoom will stay 100% and fix the issue for you

enter image description here

Upvotes: 1

Simon_Weaver
Simon_Weaver

Reputation: 145880

Chrome is definitely doing something 'heuristically' and I'm pretty sure there are some bugs.

When using the 'responsive mode' (so I can drag the width back and forth) below around 320px the whole page starts scaling down. This makes sense as a default since there are basically no devices below that width and most content looks awful if it's allowed to fend for itself at such small sizes.

My original viewport settings were:

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

The problem with that was there's nothing in the Chrome UI to constrain the minimum width to 320px (nobody needs to be designing for below that) and if you're dragging back and forth quickly then you'll inevitably end up with a width of say 169px. See the screenshot below to see how much of a mess I got in.

The height of my menu bar is 50px so it's clear that it is being scaled down. Unfortunately the rendering engine just seems to get confused and my buttons end up overflowing and making a huge mess. Even if I resize to greater than 320px it still stays confused and I have to refresh the page.

enter image description here

The important part of the accepted answer is the minimum-scale=1.0 which prevents this scaling at low screen widths.

That's the key part to add to fix the issue and I can't see any reason to not have that.

Upvotes: 2

Jolly Good
Jolly Good

Reputation: 550

As of now you can go to device toolbar then click Responsive here: enter image description here

Then in the Responsive dropdown go to Edit ... and add the resolution you want.

enter image description here

Then you can select your custom one from the options and zoom and it will stay the same resolution!

Upvotes: 0

Mr.Mostafa
Mr.Mostafa

Reputation: 227

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.

Upvotes: 16

Viktor
Viktor

Reputation: 3080

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: ""

Upvotes: 5

gdaniel
gdaniel

Reputation: 1464

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:

enter image description here

Upvotes: 11

Koong
Koong

Reputation: 11

Change Dock side to Undock into separate window as shown in the picture below:

enter image description here

Upvotes: -2

Mad Dog Cadogen
Mad Dog Cadogen

Reputation: 667

Here's how I finally managed to resolve this issue in 5 steps, I hope it helps:

  1. Click "Toggle device toolbar" to bring the toolbar up image of toggle device toolbar icon

  2. Click the 3 dots on the right hand side of the device toolbar

image of location of 3 dots

  1. Click the option "Add device type".

  2. This will add a new dropdown to the device toolbar. From there you can select "Desktop (touch)" image of new device type dropdown

  3. Problem solved.

Upvotes: 59

nonane
nonane

Reputation: 1

under zoom menu in responsive window > auto adjust zoom must get disabled

Upvotes: -2

Antonios
Antonios

Reputation: 129

Here is what worked for me:

  1. F12 (open developer tools)
  2. Ctrl + Shift + M (toggle device toolbar)
  3. Click the top right three dot menu
  4. Click Add Device Type
  5. On the top bar, A "Mobile" or "Desktop" dropdown list should appear
  6. Chances are "Mobile" is selected, switch it to "Desktop"

The auto-zoom should now go away, when you are in responsive mode and shrink the width of the viewport/device...

Upvotes: 6

artisanbhu
artisanbhu

Reputation: 245

  1. Click F12
  2. In the right, top corner, near to chrome cross sign click on "Customize and control DevTools" kebab menu.
  3. Click settings
  4. Click Preferences
  5. At the bottom, Click Restore defaults and reload
  6. Make sure that you extensions will be removed.

Upvotes: -1

Jack Lovett
Jack Lovett

Reputation: 1221

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.

Screenshot here

Upvotes: 98

Related Questions