在移动设备上为不可缩放的视口添加可捏合缩放的div图像

Question

考虑以下视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />

页面上的内容是不可缩放和移动响应的。有时候，我需要在其上叠加一个大图像，并允许用户对该图像进行捏合缩放。

#overlay_div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #dddddd;
    z-index: 550000;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

<div id="overlay_div">
    <img src="largeimage.jpg" width="100%">
</div>

目前，我知道有两个可能的选择：

1. 通过编程方式更改viewport meta以允许用户缩放（可能会引起跨浏览器的问题，也会导致底层内容缩放，这是不可取的）
2. 使用hammer.js手动处理捏合事件并相应地缩放div / image（似乎非常复杂可能存在兼容性问题）。

有没有人知道正确的方法，特别是针对跨浏览器兼容性？我希望可能有一个简单的CSS解决方案。

谢谢

- wayofthefuture

---

我希望戴眼镜的人不要尝试使用这个页面，因为如果他们无法缩放，就无法阅读。这就是为什么它不是一个推荐的属性。 - Paulie_D

Millikenchemical.com在移动设备上不可缩放，但可以阅读。据我理解，这也是网络发展的趋势。即移动设备友好、响应式内容。谢谢。 - wayofthefuture

Answer 1

我不确定这是否适用于您的情况，但通常我更喜欢将图像作为链接（a）到原始图像。移动浏览器可以处理此情况，在全屏模式下打开图像。然后用户可以随意使用图像或返回主页面。

- spinus

---

你能详细说明一下你所说的“全屏模式”吗？这是JavaScript还是CSS的事情？ - MarksCode

@MarksCode，我在谈论在浏览器中打开图像而不需要任何插件/JS代码。大多数浏览器，特别是移动设备，都可以很好地处理这个问题。 - spinus

啊..太糟糕了，这个不支持捏合缩放 :( - MarksCode

在多个安卓设备上（在Firefox和Chrome上）对我有效，但我不确定其他平台是否适用。 - spinus

如果你在 Cordova 应用中实现导航，就没有地方放置“返回”按钮。我非常确定这是苹果的错，忽略了这个重要的导航按钮的必要性。但我们无法改变这一点。因此，该解决方案仅适用于 Web 应用程序，而不适用于 Cordova 应用程序。 - Brian Cannard

Answer 2

通常我会选择可缩放版本，就像@Paulie_D所建议的那样。因此，在您所有的页面上使用它：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这里是Google的建议。

如果您真的没有其他选择，我建议使用上面显示的meta标签和一个用于导航的返回链接，在同一浏览器选项卡/窗口中打开图像。这样就可以使用本地的缩放功能。

以下是这种实现的示例（您需要一个移动用户代理）：https://m.notebooksbilliger.de/notebooks/hp+compaq+15+h024sg

- Fabian Mebus

---

嗯...这是一个地图，所以我禁用了用户缩放。当你捏合地图时会缩放。也许我可以使用您的视口元标记启用缩放，并尝试删除会导致地图div缩放的事件...我不知道。谢谢。 - wayofthefuture

OpenLayers与Google地图层...我尝试使用hammer.js，但在Windows手机上遇到了麻烦。我认为此时最好的选择是重定向到一个新页面，并使用window.location.back()快速返回。 - wayofthefuture

你认为是否有办法通过 iframe 来实现这个？ - wayofthefuture

@wayofthefuture 我对这种方法很感兴趣，因为浏览器已经知道如何在页面上进行捏合缩放，那么为什么要使用复杂的JavaScript库呢？但是，我想要能够在特定的元素上进行捏合缩放。 - Michael