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

Question

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

使页面更具响应性现在不是一种选择; 它是一个相当大的Web应用程序,重构需要花费大量时间.

Answer 1

挖掘了许多其他问题,试图缩小以适应整个页面.这个问题与我的需求最相关,但没有答案.我发现这个类似的问题有一个解决方案,虽然实现方式不同,而不是我需要的.

我想出了这个,这似乎至少在Android中有效.

1. initial-scale=0.1:缩小到目前为止.应该透露你的整个网站(然后一些)
2. 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();