javascript - 使用 Javascript 强制移动浏览器缩小

Question

在我的网络应用程序中，我有一些缩略图，单击它们会打开一个灯箱。在移动设备上，缩略图很小，用户通常会放大。问题是当他们点击播放时，灯箱在可视区域之外(他们必须滚动到灯箱才能看到视频)。是否可以强制移动浏览器缩小以便他们可以看到整个页面？

让页面更具响应性现在不是一个选择；这是一个相当大的 Web 应用程序，需要花费大量时间进行重构。

Answer 1

挖掘了很多其他问题，试图缩小某些内容以适合整个页面。这个问题与我的需求最相关，但没有答案。我找到了 this similar question它有一个解决方案，虽然实现方式不同，但不是我需要的。

我想到了这个，它似乎至少在 Android 中有效。

1. initial-scale=0.1:缩小得非常远。应该显示您的整个网站(然后是一些)
2. width=1200:覆盖 initial-scale，将设备宽度设置为 1200。

您需要将 1200 更改为您网站的宽度。如果您的网站是响应式的，那么您可以只使用 initial-scale=1。但是，如果您的网站是响应式的，您可能一开始就不需要它。

function zoomOutMobile() {
  var viewport = document.querySelector('meta[name="viewport"]');

  if ( viewport ) {
    viewport.content = "initial-scale=0.1";
    viewport.content = "width=1200";
  }
}

zoomOutMobile();