I've update my iPhone 6 plus to iOS 10 beta version and just found that in mobile safari, you can zoom any webpages by double tapping or pinching IGNORE the user-scalable=no code in the meta tag. I don't know whether it's a bug or feature. If it's considered as a feature, how do we disable viewport zooming iOS 10 safari ?
我更新了我的iPhone 6 plus到ios10测试版，发现在mobile safari中，你可以通过双击或夹住忽略用户可伸缩的=无代码来放大任何网页。我不知道这是一个bug还是特性。如果它被认为是一个特性，我们如何禁用viewport缩放ios10 safari ?
updated on iOS 11 release, iOS 11 safari still DO NOT respect the user-scalable=no meta tag.
ios11版升级后，ios11 safari仍然不支持用户可伸缩=无元标签。
14 个解决方案
#1
71
It's possible to prevent webpage scaling in iOS 10, but it's going to involve more work on your part. I guess the argument is that a degree of difficulty should stop cargo-cult devs from dropping "user-scalable=no" into every viewport tag and making things needlessly difficult for vision-impaired users.
在ios10中可以防止网页扩展，但是这需要你做更多的工作。我认为，这种观点认为，某种程度上的困难应该可以阻止cargo-cult devs将“用户可伸缩的=no”删除到每个viewport标签中，并使对视觉受损的用户造成不必要的困难。
Still, I would like to see Apple change their implementation so that there is a simple (meta-tag) way to disable double-tap-to-zoom. Most of the difficulties relate to that interaction.
尽管如此，我还是希望看到苹果改变他们的实现，以便有一种简单的(元标记)方法来禁用双拍缩放。大多数困难都与这种互动有关。
You can stop pinch-to-zoom with something like this:
你可以像这样停止缩放:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, false);
Note that if any deeper targets call stopPropagation on the event, the event will not reach the document and the scaling behavior will not be prevented by this listener.
注意，如果任何更深层次的目标在事件上调用stopPropagation，那么这个事件将不会到达文档，这个侦听器也不会阻止伸缩行为。
Disabling double-tap-to-zoom is similar. You disable any tap on the document occurring within 300 milliseconds of the prior tap:
禁用double-tap-to-zoom是相似的。您可以禁用在前一次点击300毫秒内发生的文档上的任何点击:
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.
如果你没有正确设置表单元素，聚焦于一个输入将自动缩放，并且由于你已经禁用了手动缩放，现在几乎不可能取消缩放。确保输入字体大小为>= 16px。
If you're trying to solve this in a WKWebView in a native app, the solution given above is viable, but this is a better solution: https://*.com/a/31943976/661418. And as mentioned in other answers, in iOS 10 beta 6, Apple has now provided a flag to honor the meta tag.
如果您试图在本地应用程序的WKWebView中解决这个问题，上面给出的解决方案是可行的，但是这是一个更好的解决方案:https://*.com/a/31943976/661418。正如在其他答案中提到的，在ios10 beta 6中，苹果现在提供了一个标记来纪念meta标记。
Update May 2017: I replaced the old 'check touches length on touchstart' method of disabling pinch-zoom with a simpler 'check event.scale on touchmove' approach. Should be more reliable for everyone.
2017年5月更新:我用一个更简单的“检查事件”替换了旧的“touchstart上的检查触摸长度”方法，即禁用缩放。规模touchmove的方法。应该对每个人都更可靠。
#2
70
This is a new feature in iOS 10.
这是ios10的一个新功能。
From the iOS 10 beta 1 release notes:
iOS 10 beta 1发布说明:
- To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets
user-scalable=noin the viewport.- 为了提高Safari中网站的可访问性，即使网站在viewport中设置了用户可伸缩=no，用户也可以进行缩放。
I expect we're going to see a JS add-on soon to disable this in some way.
我想我们很快就会看到一个JS插件以某种方式禁用它。
#3
12
It appears that this behavior is supposedly changed in the latest beta, which at the time of writing is beta 6.
看起来这种行为在最新的beta版本中被改变了，在写作的时候是beta 6。
From the release notes for iOS 10 Beta 6:
从ios10 Beta 6的发布说明:
WKWebViewnow defaults to respectinguser-scalable=nofrom a viewport. Clients ofWKWebViewcan improve accessibility and allow users to pinch-to-zoom on all pages by setting theWKWebViewConfigurationpropertyignoresViewportScaleLimitstoYES.WKWebView现在默认为用户可伸缩=不可见端口。WKWebView的客户端可以通过设置WKWebViewConfiguration属性来提高可访问性，并允许用户对所有页面进行缩放。
However, in my (very limited) testing, I can't yet confirm this to be the case.
然而，在我(非常有限)的测试中，我还不能确认这是真的。
Edit: verified, iOS 10 Beta 6 respects user-scalable=no by default for me.
编辑:验证，ios10测试版6的用户可扩展性=默认值为no。
#4
10
I've been able to fix this using the touch-action css property on individual elements. Try setting touch-action: manipulation; on elements that are commonly clicked on, like links or buttons.
我已经能够通过在单个元素上使用触摸操作css属性来修复这个问题。尝试设置touch-action:操纵;通常单击的元素，如链接或按钮。
#5
6
I spent about an hour looking for a more robust javascript option, and did not find one. It just so happens that in the past few days I've been fiddling with hammer.js (Hammer.js is a library that lets you manipulate all sorts of touch events easily) and mostly failing at what I was trying to do.
我花了大约一个小时寻找一个更健壮的javascript选项，但没有找到。碰巧的是，在过去的几天里我一直在摆弄锤子。js(锤。js是一个库，它可以让您轻松地操纵各种触摸事件)，而且在我尝试做的事情中，大多数都失败了。
With that caveat, and understanding I am by no means a javascript expert, this is a solution I came up with that basically leverages hammer.js to capture the pinch-zoom and double-tap events and then log and discard them.
有了这个警告，理解我绝不是一个javascript专家，这是我提出的一个解决方案，基本上是利用锤子。js捕捉缩放和双击事件，然后记录并丢弃它们。
Make sure you include hammer.js in your page and then try sticking this javascript in the head somewhere:
一定要包括锤子。在你的页面中插入js，然后试着把这个javascript插入到某个地方:
< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >
// SPORK - block pinch-zoom to force use of tooltip zoom
$(document).ready(function() {
// the element you want to attach to, probably a wrapper for the page
var myElement = document.getElementById('yourwrapperelement');
// create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
var hammertime = new Hammer(myElement, {
prevent_default: false,
touchAction: "pan"
});
// pinch is not enabled by default in hammer
hammertime.get('pinch').set({
enable: true
});
// name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
console.log('captured event:', e.type);
e.preventDefault();
})
});
</script>#6
5
I tried the previous answer about pinch-to-zoom
我尝试了之前关于缩放的回答
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
however sometime the screen still zoom when the event.touches.length > 1 I found out the best way is using touchmove event, to avoid any finger moving on the screen. The code will be something like this:
然而，有时当event.touch时，屏幕仍然会放大。长度> 1我发现最好的方法是使用touchmove事件，以避免手指在屏幕上移动。代码是这样的:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
Hope it will help.
希望它会有所帮助。
#7
5
Check for scale factor in touchove event then prevent touch event.
检查touchove事件中的比例因子，然后防止触摸事件。
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
#8
4
We can get everything we want by injecting one style rule and by intercepting zoom events:
我们可以通过注入一个样式规则和截取缩放事件来得到我们想要的一切:
$(function () {
if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
$(document.head).append(
'<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
)
$(window).on('gesturestart touchmove', function (evt) {
if (evt.originalEvent.scale !== 1) {
evt.originalEvent.preventDefault()
document.body.style.transform = 'scale(1)'
}
})
})
✔ Disables pinch zoom.
✔禁用触控放大。
✔ Disables double-tap zoom.
✔禁用双击缩放。
✔ Scroll is not affected.
✔滚动不受影响。
✔ Disables tap highlight (which is triggered, on iOS, by the style rule).
✔禁用利用突出(触发,iOS,由样式规则)。
NOTICE: Tweak the iOS-detection to your liking. More on that here.
注意:根据您的喜好调整ios检测。更多的在这里。
Apologies to lukejackson and Piotr Kowalski, whose answers appear in modified form in the code above.
向卢克·杰克逊和彼得·科沃斯基道歉，他们的回答在上面的代码中以修改后的形式出现。
#9
3
I came up with a pretty naive solution, but it seems to work. My goal was to prevent accidental double-taps to be interpreted as zoom in, while keeping pinch to zoom working for accessibility.
我想出了一个很简单的解决方案，但似乎行得通。我的目标是防止意外的双击被解释为放大，同时保持缩放为可访问性工作。
The idea is in measuring time between the first touchstart and second touchend in a double tap and then interpreting the last touchend as click if the delay is too small. While preventing accidental zooming, this method seems to keep list scrolling unaffected, which is nice. Not sure if I haven't missed anything though.
这个想法是在第一个touchstart和第二个touchend之间测量时间，然后解释最后一个touchend，如果延迟太小的话。在防止意外缩放的同时，这个方法似乎不影响列表滚动，这很好。我不确定我是否漏掉了什么。
let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;
document.addEventListener('touchstart', () => {
preLastTouchStartAt = lastTouchStartAt;
lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
const touchEndAt = +new Date();
if (touchEndAt - preLastTouchStartAt < delay) {
event.preventDefault();
event.target.click();
}
});
Inspired by a gist from mutewinter and Joseph's answer.
灵感来自于mutewinter和Joseph的答案。
#10
1
As odd as it sounds, at least for Safari in iOS 10.2, double tap to zoom is magically disabled if your element or any of its ancestors have one of the following:
听起来很奇怪，至少在ios10.2的Safari浏览器上，如果你的元素或它的任何祖先有以下一种，双击缩放功能就会被神奇地禁用:
- An onClick listener - it can be a simple noop.
- 一个onClick侦听器——它可以是一个简单的noop。
- A
cursor: pointerset in CSS - 光标:CSS中设置的指针
#11
1
Found this simple work around which appears to prevent double click to zoom:
发现这个简单的工作，似乎防止双击缩放:
// Convert touchend events to click events to work around an IOS 10 feature which prevents
// developers from using disabling double click touch zoom (which we don't want).
document.addEventListener('touchend', function (event) {
event.preventDefault();
$(event.target).trigger('click');
}, false);
#12
1
In my particular case, I am using Babylon.js to create a 3D scene and my whole page consists of one full screen canvas. The 3D engine has its own zooming functionality but on iOS the pinch-to-zoom interferes with that. I updated the the @Joseph answer to overcome my problem. To disable it, I figured out that I need to pass the {passive: false} as an option to the event listener. The following code works for me:
在我的例子中，我用的是巴比伦。js创建一个3D场景，我的整个页面由一个全屏画布组成。3D引擎有自己的缩放功能，但在iOS系统中，缩放功能会受到影响。我更新了@Joseph的答案来解决我的问题。为了禁用它，我发现我需要将{passive: false}作为一个选项传递给事件侦听器。下面的代码适用于我:
window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
#13
0
I checked all above answers in practice with my page on iOS (iPhone 6, iOS 10.0.2), but with no success. This is my working solution:
在iOS (iPhone 6, iOS 10.0.2)上，我在实践中检查了所有的答案，但没有成功。这是我的工作方案:
$(window).bind('gesturestart touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
document.body.style.transform = 'scale(1)'
}
});
#14
0
Unintentional zooming tends to happen when:
当:
- A user double taps on a component of the interface
- 用户双击界面的组件
- A user interacts with the viewport using two or more digits (pinch)
- 用户使用两个或多个数字(缩放)与视口进行交互
To prevent the double tap behaviour I have found two very simple workarounds:
为了防止双击行为，我找到了两个非常简单的方法:
<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>
Both of these prevent Safari (iOS 10.3.2) from zooming in on the button. As you can see one is JavaScript only, the other is CSS only. Use appropriately.
这两种方法都可以防止Safari (ios10.3.2)在按钮上放大。正如您看到的，一个是JavaScript，另一个是CSS。适当地使用。
Here is a demo: https://codepen.io/lukejacksonn/pen/QMELXQ
这是一个演示:https://codepen.io/lukejacksonn/pen/QMELXQ。
I have not attempted to prevent the pinch behaviour (yet), primarily because I tend not to create multi touch interfaces for the web and secondly I have come round to the idea that perhaps all interfaces including native app UI should be "pinch to zoom"-able in places. I'd still design to avoid the user having to do this to make your UI accessible to them, at all costs.
我还没有试图阻止缩放行为(现在)，主要是因为我倾向于不为web创建多触摸接口，其次，我已经考虑到，也许所有的接口，包括本地应用程序UI都应该是“缩放”——在某些地方是可以的。我仍然会设计避免用户不得不这样做，以使你的UI可以被他们访问，不惜任何代价。
#1
71
It's possible to prevent webpage scaling in iOS 10, but it's going to involve more work on your part. I guess the argument is that a degree of difficulty should stop cargo-cult devs from dropping "user-scalable=no" into every viewport tag and making things needlessly difficult for vision-impaired users.
在ios10中可以防止网页扩展，但是这需要你做更多的工作。我认为，这种观点认为，某种程度上的困难应该可以阻止cargo-cult devs将“用户可伸缩的=no”删除到每个viewport标签中，并使对视觉受损的用户造成不必要的困难。
Still, I would like to see Apple change their implementation so that there is a simple (meta-tag) way to disable double-tap-to-zoom. Most of the difficulties relate to that interaction.
尽管如此，我还是希望看到苹果改变他们的实现，以便有一种简单的(元标记)方法来禁用双拍缩放。大多数困难都与这种互动有关。
You can stop pinch-to-zoom with something like this:
你可以像这样停止缩放:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, false);
Note that if any deeper targets call stopPropagation on the event, the event will not reach the document and the scaling behavior will not be prevented by this listener.
注意，如果任何更深层次的目标在事件上调用stopPropagation，那么这个事件将不会到达文档，这个侦听器也不会阻止伸缩行为。
Disabling double-tap-to-zoom is similar. You disable any tap on the document occurring within 300 milliseconds of the prior tap:
禁用double-tap-to-zoom是相似的。您可以禁用在前一次点击300毫秒内发生的文档上的任何点击:
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.
如果你没有正确设置表单元素，聚焦于一个输入将自动缩放，并且由于你已经禁用了手动缩放，现在几乎不可能取消缩放。确保输入字体大小为>= 16px。
If you're trying to solve this in a WKWebView in a native app, the solution given above is viable, but this is a better solution: https://*.com/a/31943976/661418. And as mentioned in other answers, in iOS 10 beta 6, Apple has now provided a flag to honor the meta tag.
如果您试图在本地应用程序的WKWebView中解决这个问题，上面给出的解决方案是可行的，但是这是一个更好的解决方案:https://*.com/a/31943976/661418。正如在其他答案中提到的，在ios10 beta 6中，苹果现在提供了一个标记来纪念meta标记。
Update May 2017: I replaced the old 'check touches length on touchstart' method of disabling pinch-zoom with a simpler 'check event.scale on touchmove' approach. Should be more reliable for everyone.
2017年5月更新:我用一个更简单的“检查事件”替换了旧的“touchstart上的检查触摸长度”方法，即禁用缩放。规模touchmove的方法。应该对每个人都更可靠。
#2
70
This is a new feature in iOS 10.
这是ios10的一个新功能。
From the iOS 10 beta 1 release notes:
iOS 10 beta 1发布说明:
- To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets
user-scalable=noin the viewport.- 为了提高Safari中网站的可访问性，即使网站在viewport中设置了用户可伸缩=no，用户也可以进行缩放。
I expect we're going to see a JS add-on soon to disable this in some way.
我想我们很快就会看到一个JS插件以某种方式禁用它。
#3
12
It appears that this behavior is supposedly changed in the latest beta, which at the time of writing is beta 6.
看起来这种行为在最新的beta版本中被改变了，在写作的时候是beta 6。
From the release notes for iOS 10 Beta 6:
从ios10 Beta 6的发布说明:
WKWebViewnow defaults to respectinguser-scalable=nofrom a viewport. Clients ofWKWebViewcan improve accessibility and allow users to pinch-to-zoom on all pages by setting theWKWebViewConfigurationpropertyignoresViewportScaleLimitstoYES.WKWebView现在默认为用户可伸缩=不可见端口。WKWebView的客户端可以通过设置WKWebViewConfiguration属性来提高可访问性，并允许用户对所有页面进行缩放。
However, in my (very limited) testing, I can't yet confirm this to be the case.
然而，在我(非常有限)的测试中，我还不能确认这是真的。
Edit: verified, iOS 10 Beta 6 respects user-scalable=no by default for me.
编辑:验证，ios10测试版6的用户可扩展性=默认值为no。
#4
10
I've been able to fix this using the touch-action css property on individual elements. Try setting touch-action: manipulation; on elements that are commonly clicked on, like links or buttons.
我已经能够通过在单个元素上使用触摸操作css属性来修复这个问题。尝试设置touch-action:操纵;通常单击的元素，如链接或按钮。
#5
6
I spent about an hour looking for a more robust javascript option, and did not find one. It just so happens that in the past few days I've been fiddling with hammer.js (Hammer.js is a library that lets you manipulate all sorts of touch events easily) and mostly failing at what I was trying to do.
我花了大约一个小时寻找一个更健壮的javascript选项，但没有找到。碰巧的是，在过去的几天里我一直在摆弄锤子。js(锤。js是一个库，它可以让您轻松地操纵各种触摸事件)，而且在我尝试做的事情中，大多数都失败了。
With that caveat, and understanding I am by no means a javascript expert, this is a solution I came up with that basically leverages hammer.js to capture the pinch-zoom and double-tap events and then log and discard them.
有了这个警告，理解我绝不是一个javascript专家，这是我提出的一个解决方案，基本上是利用锤子。js捕捉缩放和双击事件，然后记录并丢弃它们。
Make sure you include hammer.js in your page and then try sticking this javascript in the head somewhere:
一定要包括锤子。在你的页面中插入js，然后试着把这个javascript插入到某个地方:
< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >
// SPORK - block pinch-zoom to force use of tooltip zoom
$(document).ready(function() {
// the element you want to attach to, probably a wrapper for the page
var myElement = document.getElementById('yourwrapperelement');
// create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
var hammertime = new Hammer(myElement, {
prevent_default: false,
touchAction: "pan"
});
// pinch is not enabled by default in hammer
hammertime.get('pinch').set({
enable: true
});
// name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
console.log('captured event:', e.type);
e.preventDefault();
})
});
</script>#6
5
I tried the previous answer about pinch-to-zoom
我尝试了之前关于缩放的回答
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
however sometime the screen still zoom when the event.touches.length > 1 I found out the best way is using touchmove event, to avoid any finger moving on the screen. The code will be something like this:
然而，有时当event.touch时，屏幕仍然会放大。长度> 1我发现最好的方法是使用touchmove事件，以避免手指在屏幕上移动。代码是这样的:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
Hope it will help.
希望它会有所帮助。
#7
5
Check for scale factor in touchove event then prevent touch event.
检查touchove事件中的比例因子，然后防止触摸事件。
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
#8
4
We can get everything we want by injecting one style rule and by intercepting zoom events:
我们可以通过注入一个样式规则和截取缩放事件来得到我们想要的一切:
$(function () {
if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
$(document.head).append(
'<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
)
$(window).on('gesturestart touchmove', function (evt) {
if (evt.originalEvent.scale !== 1) {
evt.originalEvent.preventDefault()
document.body.style.transform = 'scale(1)'
}
})
})
✔ Disables pinch zoom.
✔禁用触控放大。
✔ Disables double-tap zoom.
✔禁用双击缩放。
✔ Scroll is not affected.
✔滚动不受影响。
✔ Disables tap highlight (which is triggered, on iOS, by the style rule).
✔禁用利用突出(触发,iOS,由样式规则)。
NOTICE: Tweak the iOS-detection to your liking. More on that here.
注意:根据您的喜好调整ios检测。更多的在这里。
Apologies to lukejackson and Piotr Kowalski, whose answers appear in modified form in the code above.
向卢克·杰克逊和彼得·科沃斯基道歉，他们的回答在上面的代码中以修改后的形式出现。
#9
3
I came up with a pretty naive solution, but it seems to work. My goal was to prevent accidental double-taps to be interpreted as zoom in, while keeping pinch to zoom working for accessibility.
我想出了一个很简单的解决方案，但似乎行得通。我的目标是防止意外的双击被解释为放大，同时保持缩放为可访问性工作。
The idea is in measuring time between the first touchstart and second touchend in a double tap and then interpreting the last touchend as click if the delay is too small. While preventing accidental zooming, this method seems to keep list scrolling unaffected, which is nice. Not sure if I haven't missed anything though.
这个想法是在第一个touchstart和第二个touchend之间测量时间，然后解释最后一个touchend，如果延迟太小的话。在防止意外缩放的同时，这个方法似乎不影响列表滚动，这很好。我不确定我是否漏掉了什么。
let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;
document.addEventListener('touchstart', () => {
preLastTouchStartAt = lastTouchStartAt;
lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
const touchEndAt = +new Date();
if (touchEndAt - preLastTouchStartAt < delay) {
event.preventDefault();
event.target.click();
}
});
Inspired by a gist from mutewinter and Joseph's answer.
灵感来自于mutewinter和Joseph的答案。
#10
1
As odd as it sounds, at least for Safari in iOS 10.2, double tap to zoom is magically disabled if your element or any of its ancestors have one of the following:
听起来很奇怪，至少在ios10.2的Safari浏览器上，如果你的元素或它的任何祖先有以下一种，双击缩放功能就会被神奇地禁用:
- An onClick listener - it can be a simple noop.
- 一个onClick侦听器——它可以是一个简单的noop。
- A
cursor: pointerset in CSS - 光标:CSS中设置的指针
#11
1
Found this simple work around which appears to prevent double click to zoom:
发现这个简单的工作，似乎防止双击缩放:
// Convert touchend events to click events to work around an IOS 10 feature which prevents
// developers from using disabling double click touch zoom (which we don't want).
document.addEventListener('touchend', function (event) {
event.preventDefault();
$(event.target).trigger('click');
}, false);
#12
1
In my particular case, I am using Babylon.js to create a 3D scene and my whole page consists of one full screen canvas. The 3D engine has its own zooming functionality but on iOS the pinch-to-zoom interferes with that. I updated the the @Joseph answer to overcome my problem. To disable it, I figured out that I need to pass the {passive: false} as an option to the event listener. The following code works for me:
在我的例子中，我用的是巴比伦。js创建一个3D场景，我的整个页面由一个全屏画布组成。3D引擎有自己的缩放功能，但在iOS系统中，缩放功能会受到影响。我更新了@Joseph的答案来解决我的问题。为了禁用它，我发现我需要将{passive: false}作为一个选项传递给事件侦听器。下面的代码适用于我:
window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
#13
0
I checked all above answers in practice with my page on iOS (iPhone 6, iOS 10.0.2), but with no success. This is my working solution:
在iOS (iPhone 6, iOS 10.0.2)上，我在实践中检查了所有的答案，但没有成功。这是我的工作方案:
$(window).bind('gesturestart touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
document.body.style.transform = 'scale(1)'
}
});
#14
0
Unintentional zooming tends to happen when:
当:
- A user double taps on a component of the interface
- 用户双击界面的组件
- A user interacts with the viewport using two or more digits (pinch)
- 用户使用两个或多个数字(缩放)与视口进行交互
To prevent the double tap behaviour I have found two very simple workarounds:
为了防止双击行为，我找到了两个非常简单的方法:
<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>
Both of these prevent Safari (iOS 10.3.2) from zooming in on the button. As you can see one is JavaScript only, the other is CSS only. Use appropriately.
这两种方法都可以防止Safari (ios10.3.2)在按钮上放大。正如您看到的，一个是JavaScript，另一个是CSS。适当地使用。
Here is a demo: https://codepen.io/lukejacksonn/pen/QMELXQ
这是一个演示:https://codepen.io/lukejacksonn/pen/QMELXQ。
I have not attempted to prevent the pinch behaviour (yet), primarily because I tend not to create multi touch interfaces for the web and secondly I have come round to the idea that perhaps all interfaces including native app UI should be "pinch to zoom"-able in places. I'd still design to avoid the user having to do this to make your UI accessible to them, at all costs.
我还没有试图阻止缩放行为(现在)，主要是因为我倾向于不为web创建多触摸接口，其次，我已经考虑到，也许所有的接口，包括本地应用程序UI都应该是“缩放”——在某些地方是可以的。我仍然会设计避免用户不得不这样做，以使你的UI可以被他们访问，不惜任何代价。