☰

Google Chrome - 缩放而不更改视口

tag-icon • tag-icon google-chrome google-chrome-extensions zoom
Google Chrome - 缩放而不更改视口

也许我忽略了一些东西，或者不知道如何很好地表述我的问题，但我无法在网上找到有关此问题的任何信息。

我希望在 Chrome 中放大，而不改变视口或网站。因此，如果我放大某个网站，我可以放大某个细节，而无需我的响应式设计移动它并将其缩放到“正确”的大小。

是否有适用于此功能的 Chrome 扩展程序，或者如何在 Chrome 中启用此类缩放功能？

答案1

如果您有精密触摸板（大多数新款笔记本电脑都有）或触摸屏，则可以通过捏合来缩放。

答案2

这个扩展正是您正在寻找的：自定义页面缩放

但遗憾的是，它没有捷径。

附言：请记住，此扩展程序出于某种原因请求访问您访问的所有网站的数据。

答案3

对于 macOS
拍摄网页。按 Command 和“+”按钮缩放。

对于 Windows
抓取网页。按住 Ctrl 键并向上滚动鼠标滚轮。

编辑

1) 进入系统偏好设置->辅助功能
2) 选择缩放并启用“使用键盘快捷键缩放”
3) 记下快捷键。
4) 默认情况下⌥- ⌘-=用于放大，⌥- ⌘--用于缩小。

答案4

用户代理（Chrome、Firefox、Android 版 Chrome 等）的默认行为是将主体设置为视口的 100%，准确地说是视觉视口。因此，当调整窗口大小时，视口（布局和视觉）会发生变化，这会导致它始终合身内容并导致其他不良（并非总是）后果，例如更改响应式设计中的布局。

如果您使用移动优先方法，请将正文min-width（在您的媒体查询中）设置为绝对值并使用min-device-width或max-device-width触发您的媒体查询。

这将触发媒体查询，不是在浏览器窗口调整大小时，而是仅在内容呈现在媒体查询中提到的大小的设备上时。

例如：

body {
width : 90%;
}

并使用媒体查询，如：

@media screen and (min-device-width: 960px) {

  body {
   width : 900px;
  }

// Other CSS Rules to apply when device width > 960px
}

这将导致您的布局在移动设备上响应，但在桌面上不响应，即使您的浏览器窗口调整大小或缩放也是如此。相反，当内容缩放或调整大小时，它会放置一个水平滚动条。

通过使用此方法，您还可以跳过使用标签<meta name="viewport" content="width=device-width, initial-scale=1" >（尽管不推荐）

希望这可以帮助！

相关内容