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 ?
updated on iOS 11/12 release, iOS 11 and iOS 12 safari still DO NOT respect the user-scalable=no meta tag.
It's possible to prevent webpage scaling in safari on 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.
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.
Disabling double-tap-to-zoom is similar. You disable any tap on the document occurring within 300 milliseconds of the prior tap:
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.
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://mcmap.net/q/57170/-disable-magnification-gesture-in-wkwebview. And as mentioned in other answers, in iOS 10 beta 6, Apple has now provided a flag to honor the meta tag.
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.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> and if browser doesn't respect the meta tag, it is very bad browser design. The other this like very bad design is back/forward action by sliding, which cannot be prevented in iOS 9/10. It breaks severely dragging actions inside web application. –
Mizzle preventDefault on touchmove. You can't (completely) disable zoom without disabling scroll. –
Baerl 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. –
Cassilda event.scale. I'm using typescript and I can't resolve the event type. I have found developer.mozilla.org/en-US/docs/Web/API/GestureEvent but it's marked as a non-standard API. –
Possessory gesturestart instead touchmove with if clause? You would safe performance by not having a if clause, or is there any reason to do so? –
Islaen false (or { capture: true }) as the last argument to removeEventListener: document.removeEventListener('touchmove', yourFunction, false). Struggled with this for a bit myself as page stopped scaling and scrolling forever after one interaction –
Anthotaxy event.scale bit works for me on iOS, but it prevents any & all panning on Android/Chrome v91. To make it work across these platforms I had to add if (('scale' in event) && event.scale !== 1) { ... –
Gael This is a new feature in iOS 10.
From the iOS 10 beta 1 release notes:
- To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets
user-scalable=noin the viewport.
I expect we're going to see a JS add-on soon to disable this in some way.
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.
touch-action: none; to control all the gestures yourself. –
Whitehouse touch-action: none only manipulatoin, which leaves the pinch-zoom problem as it is. –
Relevance The workaround that works in Mobile Safari at this time of writing, is to have the the third argument in addEventListener be { passive: false }, so the full workaround looks like this:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
You may want to check if options are supported to remain backwards compatible.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">. –
Teressaterete <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" /> and <meta name="HandheldFriendly" content="true"> –
Teeters <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> –
Holily if (event.scale !== undefined && event.scale !== 1) { event.preventDefault(); } –
Sinus Use "touch-action: pan-x pan-y" to disable "pinch zoom" as well as "double tap zoom". It works on all touch screens / phones I have tested including iOS Safari 14.5.1.
body {
touch-action: pan-x pan-y;
}body, you also need to set this on any element that has overflow: scroll or overflow: auto. Or just set it on *. –
Lashio It appears that this behavior is supposedly changed in the latest beta, which at the time of writing is beta 6.
From the release notes for iOS 10 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.
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.
WKWebView not to Safari. Source: One of our map apps broke and we have no idea how to fix it. –
Domeniga WKWebView and kind of assumed that the original question asked about WKWebView when writing my answer. So I suppose that during one of the first beta versions, Apple changed the behavior of both WKWebView and mobile Safari, then in beta 6, they reverted the behavior of WKWebView but kept it for the mobile Safari. –
Gynoecium user-scalable=no. I'm not sure why they would ever undo this, only to bring it back, only to remove it again. –
Trichology 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.
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.
Make sure you include hammer.js in your page and then try sticking this javascript in the head somewhere:
< 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>.preventDefault to all the hammer gesture handlers. I'm using swipe/pinch/pan/tap together, i've added it to all the handlers, i don't know whether there's a specific one that's doing the job. –
Auctioneer 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:
window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
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).
NOTICE: Tweak the iOS-detection to your liking. More on that here.
Apologies to lukejackson and Piotr Kowalski, whose answers appear in modified form in the code above.
addEventListener based answers and passing { passive: false } as the options parameter instead of false. However, for backward compatibility you need to pass false unless the passive option field is supported. See developer.mozilla.org/en-US/docs/Web/API/EventTarget/… –
Dorathydorca 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:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
Hope it will help.
Check for scale factor in touchove event then prevent touch event.
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
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.
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.
As requested, I have transfered my comment to an answer so people can upvote it:
This works 90% of the time for iOS 13:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
and
<meta name="HandheldFriendly" content="true">
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:
cursor: pointer set in CSSUnintentional zooming tends to happen when:
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.
Here is a demo: 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.
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);
In the current version of safari this is not working anymore. You have to define the second parameter as non-passive by passing {passiv:false}
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
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:
$(window).bind('gesturestart touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
document.body.style.transform = 'scale(1)'
}
});
this worked for me:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
© 2022 - 2024 — McMap. All rights reserved.