Question

我正在尝试禁用网络应用上的双指缩放，但以下元标记在iOS Safari和iOS Chrome中效果不佳：

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>

我尝试将以下内容添加到元标记中，但我也没有成功。捏合（和双击）缩放仍然有效。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

有关为什么这两个元标记可能无法正常工作的任何见解？

Answer 1

For me following meta tags are working in both the scenarios

This works proper for cordova/Ionic project it disable the double tap/pinch on normal page

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

I open a simple page with using jquery/bootstrap in iOS safari, this also disable the double tap/pinch zoom

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

You may check this codes if you have not tried that : https://stackoverflow.com/a/11689448/4557505

Also please provide some details about your web app is it default web app like html5/responsive or you are using any cross platform like cordova/Ionic, it will help in checking the specific scenario

Answer 2

 a {touch-action: manipulation;} button {touch-action: manipulation;}

 document.documentElement.addEventListener('gesturestart', function (event)
 {    event.preventDefault();
}, false);

这在safari浏览器上非常有效

无法在iOS Safai中禁用缩放缩放（和双击）缩放Web应用程序

2 个答案: