5

When using Chrome Developer Tools in mobile device mode and switching between breakpoints, (top bar w/ different colors indicating each break point), the preview window resizes but also scales below 100%. I can click on the zoom drop down and set it back to 100% but when activating a different breakpoint it scales under 100% again. Sometimes the % ratio is not the same for each but I cannot for the life of me figure out where Chrome is getting this directive to keep reducing the scale.

This is not a duplicate of Page doesn't scale 100% on Chrome Dev Tools devices

Tried similar tools in other browsers and all breakpoints remain at 100% scale 1:1 as defined in the document. Only Chrome Dev Tools experiences this behavior.

I've verified my meta viewport settings are 100% scale too.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

The expected result is each breakpoint should by default render at 100% scale per the viewport definitions no?

The actual results are random zoom scale and I can't figure out why this occurs.

I am NOT choosing a specific device from the devices drop down. It is set as "Responsive", DPR is set to 1.0 and auto-adjust-zoom has no impact when toggled.

I have also tried a fresh browser (canary) so as to eliminate any possible plugins and the same results in Chrome nightly version.

Here is a video but the text is hard to read due to limitations w/ Loom's low video quality - https://www.loom.com/share/367e79c6ff9349a5bae96d1b818bd8b7

  • 1
    Does this answer your question? [Chrome Responsive Emulator - How to default zoom to 100%](https://stackoverflow.com/questions/46813688/chrome-responsive-emulator-how-to-default-zoom-to-100) – isaacsgraphic Jul 13 '22 at 13:29
  • Yes partially, it works for a specific device (when chosen) and resets it to 100% and then other breakpoints defined in css once clicked load at 100% but as soon as I change the device or go back to responsive, I have to reset it again to keep 100%. It's helpful still so thank you. – Philip Ingram Sep 02 '22 at 00:13
  • Pretty late to ask something on this thread, but is the real text size on physical devices close to their size when displaying in 100% zoom in chrome? Or they're smaller in real scale? I mean, there must be a reason that the inspect tool auto-adjusts zoom value. – – AliAndArdDev Mar 17 '23 at 15:59
  • I'm not entirely sure. When I inspect this page in mobile, every breakpoint is 100% until I choose responsive breakpoint Laptop L 1440px, which sets to 90%, then a new breakpoint is revealed, 4K - 2560px which then scales to 50%. My screen is size is 1920px. – Philip Ingram Apr 18 '23 at 19:13

0 Answers0