使用JavaScript强制移动浏览器缩小页面

Question

使用JavaScript强制移动浏览器缩小页面

16

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

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

- Andrew Hassan

也许这可以帮到你？http://stackoverflow.com/questions/17440196/zoom-in-and-zoom-out-functionality-in-jquery-mobile-or-javascript - Vincent Hogendoorn

2

我之前看过那篇帖子，但我认为它对我没什么帮助。我指的是移动设备可以进行的“捏合缩放”，而不是使用CSS进行缩放。作为替代方案，有没有一种方法可以检测浏览器的缩放级别？据我所知，像“detect-zoom”这样的工具在较新版本的浏览器中已经失效了。 - Andrew Hassan

5个回答

4

与 Radley Sustaire 的解决方案类似，我在 React 中成功地实现了在设备旋转时强制取消缩放的功能，代码如下：

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

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

在我的渲染器内部

this.zoomOutMobile();

我发现的一个边缘情况是，在Firefox移动浏览器上无法使用这个功能。

- Davey

出于某种原因，我不得不交换两个 viewport.content = ... 语句的顺序，才能在第一次调用时使其正常工作。随后的调用无论顺序如何都可以正常工作。 - simlmx

我认为你需要写： `viewport.content = 'initial-scale=1, width=device-width';`否则只有"width=device-width"会被应用。 - Esger

3

我遇到了类似的问题，或许正好相反，但解决方法肯定是一样的。我的情况是，我有一个缩略图供人们点击，打开一个“弹出”窗口，用户很可能会放大以查看更清楚，完成后我想返回到具有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);

在将视口重置回到我认为的正常情况之前，我会使其休眠100毫秒。这样视口就能考虑到最大缩放参数 maximum-scale=1，然后超时并移除该参数。在此过程中，缩放被改回了1，并恢复了原始状态（没有 maximum-scale 参数），可以正常使用（即可以再次缩放界面）。

警告 1： 如果你的原始代码中有 maximum-scale 参数，你可能需要替换它而不是像我的示例代码一样仅添加另一个值。（例如，force_scale = original.replace(/maximum-scale=[^,]+/, "maximum-scale=1") 将进行替换，但仅适用于已经存在 maximum-scale 的情况，因此你可能需要首先检查以允许两种情况。）

警告 2：我尝试将休眠时间从100毫秒更改为0毫秒，但失败了。这可能因浏览器而异，但 Mozilla 家族的立即超时计时器代码会连续运行，这意味着 GUI 进程在执行重置视口函数之前将无法重新设置缩放比例为1。同时，我确实知道如何知道当前视口值是否由 GUI 处理...（即这是一种不幸的Hack方法。）

- Alexis Wilke

看起来我们正在做同样的事情，允许访问者点击缩略图，导致更大的高分辨率图像出现，他们可以进一步扩展。但当图像被关闭时，用户会留下一个过度扩展的页面。你的解决方案看起来很棒，但不起作用，因为苹果似乎已经决定忽略这样的视口设置。所以我想我们都完了。有什么建议吗？我想知道Facebook如何允许用户切换到可调整大小的照片，然后返回完全正常。 :-( - Randy

如果我没记错的话，Facebook 有一个用于图片的 iframe。这意味着它是一个独立的页面。这可能解释了他们的工作原理... - Alexis Wilke

我一直在想可能是这样，尽管我考虑过一个简单的独立页面而不是一个iframe。我得试试看，谢谢！我猜在手机上打开一个“新页面”到一个新窗口必须在同一屏幕上打开，如果我在另一个点击/触摸事件后执行了“window.close()”，它应该会切换回第一个屏幕。我希望是这样的。我讨厌只能用自己的iPhone进行测试，并且必须打电话给所有使用Android的朋友来测试相同的行为。 - Randy

Alexis，我通过你的“https://www.alexiswilke.me/contact” 页面向你发送了一条消息。由于没有确认信息，所以我不知道你是否收到了。但是可以看一下吗？ - Randy

@Randy 确实出现了故障。您需要再试一次。对此造成的不便深感抱歉！ - Alexis Wilke

0

这个对我有用

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

它适合将HTML放入屏幕中，并防止滚动。但这并不是一个好主意，并且不适用于所有情况。

- ikebastuz

0

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替换为您页面的宽度

- Gaby_64

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Radley Sustaire · Accepted Answer

我搜了很多其他问题，试图找到一些东西来缩小页面以适合整个页面。这个问题是我需要的最相关的，但没有答案。我发现这个类似的问题有一个解决方案，尽管实现方式不同，但并不是我需要的。

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

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();