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>

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

以编程方式更改视口元以允许用户缩放（可能的跨浏览器含义，也会导致下面的内容缩放，这是不可取的）
使用hammer.js手动处理收缩事件并相应地缩放div / image（似乎非常复杂，可能存在兼容性问题）。

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

由于

Answer 1

我不确定您的情况，但通常我更喜欢将图片作为原始图片的链接（a）。移动浏览器可以在full screen模式下处理此情况以打开图像。然后用户可以对图像做任何他想做的事情，或者可以返回主页面。

Answer 2

一般情况下，我会选择像@Paulie_D推荐的可缩放版本;所以在你的所有页面上使用它：

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

这是Google´s recommendation。

如果您别无选择，我建议您使用上面显示的meta标记和 back 链接在同一浏览器标签/窗口中打开图片进行导航。所以原生捏缩放是可用的。

这是此类实施的示例（您需要移动用户代理）：https://m.notebooksbilliger.de/notebooks/hp+compaq+15+h024sg

将捏缩可缩放的div图像添加到移动设备上的不可伸缩视口

2 个答案: