强制移动浏览器使用Javascript缩小 [英] Force mobile browser zoom out with Javascript

问题描述

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

In my web app, I have some thumbnails that open a lightbox when clicked. On mobile, the thumbnails are small and the user typically zooms in. The problem is that when they click to play it, the lightbox is outside of the viewable area (they have to scroll to the lightbox to see the video). Is it possible to force a mobile browser to zoom out so they can see the whole page?

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

Making the page more responsive is not an option right now; it is a fairly large web application and it would take a huge amount of time to refactor.

推荐答案

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

Dug through a lot of other questions trying to get something to zoom out to fit the entire page. This question was the most relevant to my needs, but had no answers. I found this similar question which had a solution, although implemented differently, and not what I needed.

我想出了这个，似乎至少在Android中工作。

I came up with this, which seems to work in Android at least.

1. initial-scale = 0.1 ：缩放真的很远。应该显示你的整个网站（然后是一些）


2. width = 1200 ：覆盖初始比例，将设备宽度设置为1200。

1. initial-scale=0.1: Zooms out really far. Should reveal your whole website (and then some)
2. width=1200: Overwrites initial-scale, sets the device width to 1200.

您需要将1200更改为您网站的宽度。如果您的网站有响应，那么您可以使用 initial-scale = 1 。但是，如果您的网站有响应，您可能首先不需要这个。

You'll want to change 1200 to be the width of your site. If your site is responsive then you can probably just use initial-scale=1. But if your site is responsive, you probably don't need this in the first place.

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

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

zoomOutMobile();

这篇关于强制移动浏览器使用Javascript缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！