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

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

---

让页面更具响应性目前还不是一个选项；这是一个相当大的web应用程序，重构需要花费大量时间。

深入研究了许多其他问题，试图缩小一些内容以适应整个页面。这个问题与我的需求最相关，但没有答案。我找到了一个解决方案，虽然实现方式不同，但不是我所需要的

我想出了这个，至少在安卓系统中是可行的

initial scale=0.1

：缩小到非常远的范围。应该显示你的整个网站（然后是一些）

width=1200

：覆盖初始刻度，将设备宽度设置为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();

---

我遇到了一个类似的问题，我想是相反的，但解决方案肯定是一样的。在我的例子中，我有一个人们点击的缩略图，它会打开一个“弹出窗口”，用户可能会放大以查看更好的内容，一旦完成，我希望以1.0的比例返回正常页面

为了做到这一点，我环顾了很多地方，直到我明白发生了什么，然后才能编写正确的代码

元数据中的视口定义是一个活动值。更改后，系统会考虑新值并相应地修复渲染。但是，GUI会检测到“何时更改”，当JavaScript代码运行时，GUI线程大部分被阻塞

考虑到这一点，这意味着这样做会失败：

viewport = jQuery("meta[name='viewport']");
original = viewport.attr("content");
force_scale = original + ", maximum-scale=1";
viewport.attr("content", force_scale); // IGNORED!
viewport.attr("content", original);

所以，因为我发现唯一能修复刻度的方法就是通过做一个我不想保留的更改来强制它，所以我必须重置回原来的刻度。但是中间的变化并没有被观察到，也没有被采取行动（伟大的优化！），那么我们如何解决这个问题呢？我使用了

setTimeout（）

函数：

viewport = jQuery("meta[name='viewport']");
original = viewport.attr("content");
force_scale = original + ", maximum-scale=1";
viewport.attr("content", force_scale);
setTimeout(function()
    {
        viewport.attr("content", original);
    }, 100);

<>这里我睡100Ms，然后把视口复位到我认为正常的位置。这样，视口将考虑

最大比例=1

参数，然后超时并删除该参数。在此过程中，比例被更改回1，恢复我的原始设置（没有

最大比例

参数）的效果与预期一致（即，我可以再次缩放界面）

警告1:如果原始文件中有一个

最大刻度

参数，您可能希望替换它，而不是像我的示例代码那样在末尾附加另一个值。（也就是说，

force_scale=original.replace（/maximum scale=[^，]+/，“maximum scale=1”）

将进行替换——但这仅在已经存在

最大比例的情况下有效，因此您可能首先需要检查以考虑这两种情况。）

警告2:我尝试了0毫秒而不是100毫秒，但失败了。这可能因浏览器而异，但Mozilla系列背对背地运行立即超时的计时器代码，这意味着GUI进程在执行重置视口的功能之前，永远不会有机会将比例重置回1。我也知道有一种方法可以知道当前的视口值是由GUI处理的。。。（也就是说，不幸的是，这是一次黑客攻击。）
这一次对我很有效

let sw = window.innerWidth;
let bw = $('body').width();
let ratio = sw / bw - 0.01;
$('html').css('zoom', ratio);
$('html').css('overflow-x', 'hidden');

它使html适合屏幕并防止滚动。但这不是一个好主意，也不适用于任何地方。
与Radley Sustaire的解决方案类似，我设法在设备打开时强制取消缩放

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

    if ( viewport ) {
      viewport.content = 'initial-scale=1';
      viewport.content = 'width=device-width';
    }
  }

在我的渲染器里

this.zoomOutMobile();

我发现的一个边缘案例是，这在Firefox移动浏览器上不起作用

var zoomreset = function() {
    var viewport = document.querySelector("meta[name='viewport']");
    viewport.content = "width=650, maximum-scale=0.635";
    setTimeout(function() {
        viewport.content = "width=650, maximum-scale=1";
    }, 350);
}
setTimeout(zoomreset, 150);

将650替换为页面宽度
这可能对您有所帮助？我之前看过那篇文章，我认为它对我没有帮助。我指的是移动设备可以进行的收缩缩放，而不是使用CSS进行缩放。除此之外，是否有方法检测浏览器的缩放级别？顺便说一句，像
detect zoom
这样的工具在新版本的浏览器中被破坏了。这对我来说在android和windows手机上调整视口的大小很有效。谢谢好剧本！非常感谢，在所有设备上工作（Android、iPhone、iPad、Windows Phone）！！（别忘了把它放在html的末尾）如果勾选了“桌面站点”-android chrome，则不起作用。如何解决？我们似乎在做同样的事情，允许访问者点击缩略图，从而产生更大的高分辨率图像，他们可以进一步扩展。当然，当图像被删除时，用户会看到一个过度扩展的页面。您的解决方案看起来很棒，但不起作用，因为苹果似乎已经决定忽略像这样的视口设置。所以我想我们都完蛋了。你有什么建议吗？我想知道Facebook是如何允许用户切换到一张相当大的照片，然后完全恢复正常的-（如果我是对的，facebook有一个iframe用于图像。这意味着一个单独的页面。这可以解释他们的工作原理……我当时认为是这样的，尽管我认为是一个siple单独的页面而不是iframe。我必须尝试一下。谢谢！我想，在手机上打开一个新窗口的“新页面”必须在同一屏幕上打开恩，在这种情况下，如果我在另一次点击事件后做了一个“window.close（），它应该会切换回第一个屏幕。我想这样想。我讨厌那种只能用自己的I-phone进行测试的情况，我不得不打电话给我所有的安卓用户朋友来测试相同的行为。亚历克西斯——我给你发了一封邮件给我