如何阻止铬响应检查改变变焦？

在 Chrome 检查器中使用“切换设备滚动条”选项时，无论何时输入新的宽度/高度，窗口缩放都会自动调整该宽度/高度。这是一个令人难以置信的令人沮丧的用户界面，因为我不希望变焦调整... 永远。避免这种情况的唯一方法是通过拖动侧边框来调整响应窗口的大小。

有办法关掉自动变焦吗？

我目前使用的 chrome 版本: Version 54.0.2840.98(64-bit)

52923 次浏览
小开

若要禁用缩放，您必须在 <head>标记中添加以下内容:

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

最小的 <meta>标记(它不禁用用户控制的缩放)是:

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

这不是 Chrome 的问题。

小开

我已经遇到过好几次这样的问题了。我不确定是什么原因导致的，但我发现你可以通过选择 Toggle device toolbar菜单中的 "Restore to defaults"来修复它。

Screenshot here

小开
  1. 按 F12
  2. 在右上角，靠近铬十字标志点击“自定义和控制 DevTools”烤肉串菜单。
  3. 点击设置
  4. 单击首选项
  5. 在底部，单击“还原”默认值并重新加载
  6. 确保您的扩展将被删除。
小开

以下是对我有效的方法:

  1. F12(开放式开发人员工具)
  2. Ctrl + Shift + M (切换设备工具栏)
  3. 单击右上角的三点菜单
  4. 单击“添加设备类型”
  5. 在顶部栏，“移动”或“桌面”下拉列表应该出现
  6. 机会是“移动”被选中，切换到“桌面”

当您处于响应模式并缩小视口/设备的宽度时，自动缩放应该会消失..。

小开

下面是我如何用5个步骤最终解决这个问题的，我希望它能有所帮助:

  1. 单击 "Toggle device toolbar"打开工具栏 image of toggle device toolbar icon

  2. 单击设备工具栏右侧的3个点

image of location of 3 dots

  1. 单击选项 "Add device type"。

  2. 这将添加一个新的下拉列表到设备工具栏。从那里您可以选择 "Desktop (touch)" image of new device type dropdown

  3. 问题解决了。

小开

在响应窗口的缩放菜单 > 自动调整缩放必须被禁用

小开

将船坞侧改为 打开单独的窗口，如下图所示:

enter image description here

小开

很久以前我问过这个问题，今天我注意到了 Chrome 的变化。我不确定这是什么时候引入的，因为我没有使用响应选项太多，但是在73.0.3683.86版本(官方版本)(64位)现在有一个名为“自动调整缩放”的选项，并且默认选中(启用)。我取消了它，现在缩放将不再改变当屏幕调整大小。

您可以通过点击响应屏幕中屏幕大小旁边的“100%”来访问这个选项。见下图:

enter image description here

小开

我已经向 Chromium 报告了这个错误。

链接如下: Https://bugs.chromium.org/p/chromium/issues/detail?id=1129880#c2

我已经找到了发生这种情况的原因，以及“缓解”的原因: 将高度设置为空字符串:

小开

现在你可以进入设备工具栏然后点击这里的 有反应: enter image description here

然后在 有反应下拉菜单中转到 编辑..。并添加你想要的分辨率。

enter image description here

然后您可以选择您的自定义一个从选项和缩放，它将保持相同的分辨率！

小开

Chrome 绝对是在做一些“启发式”的东西，我很确定其中有一些 bug。

当使用320px 左右的“响应模式”(这样我就可以来回拖动宽度)时，整个页面开始缩小。默认情况下这是有意义的，因为基本上没有设备低于这个宽度，大多数内容看起来很糟糕，如果允许它在这么小的尺寸自我保护。

我最初的视图设置是:

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

问题是 Chrome 的用户界面没有将最小宽度限制为320px (没有人需要设计低于320px) ，如果你快速地来回拖动，那么你最终的宽度将不可避免地是169px。看看下面的截图，看看我惹了多大的麻烦。

我的菜单栏的高度是50像素，所以很明显，它的 是正在缩小。不幸的是，渲染引擎似乎只是得到混淆，我的按钮结束溢出，使一个巨大的混乱。即使我调整大小大于320px，它仍然保持混乱，我必须刷新页面。

enter image description here

公认答案的重要部分是 minimum-scale=1.0，它可以防止在低屏幕宽度下进行缩放。

这是解决问题的关键部分，我认为没有任何理由不这样做。


提交答案