How to prevent pinch to zoom (on scroll) on safari mobile browser?
I need my web application to behave as a native mobile app. For this I needed to prevent pinch-to-zoom and double tap zooming on all browsers. In Chrome and Firefox it was easy:
<meta name="viewport" content="width=device-width, user-scalable=no" />
On Safari its a challenge.
Here I found how to prevent pinch-to-zoom and to disable double-tap-zoom. But when you are scrolling and pinching to zoom, its zooming. My question is if there is way to block it also on scrolling?
ios iphone mobile-safari
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
add a comment |
I need my web application to behave as a native mobile app. For this I needed to prevent pinch-to-zoom and double tap zooming on all browsers. In Chrome and Firefox it was easy:
<meta name="viewport" content="width=device-width, user-scalable=no" />
On Safari its a challenge.
Here I found how to prevent pinch-to-zoom and to disable double-tap-zoom. But when you are scrolling and pinching to zoom, its zooming. My question is if there is way to block it also on scrolling?
ios iphone mobile-safari
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
Please don't do that, that breaks the expected behaviour, that is bad UX - if something is too small I want to zoom in on it.
– luk2302
Mar 18 '18 at 15:36
I know this is bad practice. But boss want this behavior.
– Ivan Cherevko
Mar 19 '18 at 15:28
6
This isn't a bad practice at all. That's just kool-aid from Apple masquerading as an accessibilty feature. The decision to enable or disable behavior of a web page must be left with web developers.
– marvindanig
Mar 31 '18 at 15:33
add a comment |
I need my web application to behave as a native mobile app. For this I needed to prevent pinch-to-zoom and double tap zooming on all browsers. In Chrome and Firefox it was easy:
<meta name="viewport" content="width=device-width, user-scalable=no" />
On Safari its a challenge.
Here I found how to prevent pinch-to-zoom and to disable double-tap-zoom. But when you are scrolling and pinching to zoom, its zooming. My question is if there is way to block it also on scrolling?
ios iphone mobile-safari
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
I need my web application to behave as a native mobile app. For this I needed to prevent pinch-to-zoom and double tap zooming on all browsers. In Chrome and Firefox it was easy:
<meta name="viewport" content="width=device-width, user-scalable=no" />
On Safari its a challenge.
Here I found how to prevent pinch-to-zoom and to disable double-tap-zoom. But when you are scrolling and pinching to zoom, its zooming. My question is if there is way to block it also on scrolling?
ios iphone mobile-safari
ios iphone mobile-safari
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
edited Mar 18 '18 at 17:05
Smartcat
1,6791315
1,6791315
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
asked Mar 18 '18 at 15:26
Ivan CherevkoIvan Cherevko
216
216
Please don't do that, that breaks the expected behaviour, that is bad UX - if something is too small I want to zoom in on it.
– luk2302
Mar 18 '18 at 15:36
I know this is bad practice. But boss want this behavior.
– Ivan Cherevko
Mar 19 '18 at 15:28
6
This isn't a bad practice at all. That's just kool-aid from Apple masquerading as an accessibilty feature. The decision to enable or disable behavior of a web page must be left with web developers.
– marvindanig
Mar 31 '18 at 15:33
add a comment |
Please don't do that, that breaks the expected behaviour, that is bad UX - if something is too small I want to zoom in on it.
– luk2302
Mar 18 '18 at 15:36
I know this is bad practice. But boss want this behavior.
– Ivan Cherevko
Mar 19 '18 at 15:28
6
This isn't a bad practice at all. That's just kool-aid from Apple masquerading as an accessibilty feature. The decision to enable or disable behavior of a web page must be left with web developers.
– marvindanig
Mar 31 '18 at 15:33
Please don't do that, that breaks the expected behaviour, that is bad UX - if something is too small I want to zoom in on it.
– luk2302
Mar 18 '18 at 15:36
Please don't do that, that breaks the expected behaviour, that is bad UX - if something is too small I want to zoom in on it.
– luk2302
Mar 18 '18 at 15:36
I know this is bad practice. But boss want this behavior.
– Ivan Cherevko
Mar 19 '18 at 15:28
I know this is bad practice. But boss want this behavior.
– Ivan Cherevko
Mar 19 '18 at 15:28
6
6
This isn't a bad practice at all. That's just kool-aid from Apple masquerading as an accessibilty feature. The decision to enable or disable behavior of a web page must be left with web developers.
– marvindanig
Mar 31 '18 at 15:33
This isn't a bad practice at all. That's just kool-aid from Apple masquerading as an accessibilty feature. The decision to enable or disable behavior of a web page must be left with web developers.
– marvindanig
Mar 31 '18 at 15:33
add a comment |
2 Answers
2
active
oldest
votes
Combined with the javascript preventDefault solution in your link; you can use the following to disable pinch in and out page-wide.
<style>
html,
body {
position: fixed;
overflow: hidden;
}
</style>
And wrap everything inside <body> in a master wrapper with the following CSS
<style>
.mainwrapper {
width: 100vw;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div id="master_wrap">
...content...
</div> <!-- /master wrapper -->
</body>
You in effect disable all body/html level scrolling, and then re-enable scrolling a level below inside the master wrapper, which includes elastic and momentum scrolling. When these elements scroll, the pinching is already ignored.
Drawbacks
1 - If you have fixed or absolute elements, then the scrolling becomes very janky.
2 - There also seems to be a strange bug where-by part of the page will be modified, and pinch becomes available again, if you scroll down from high on the page. I think it might be related to the vh property and there's probably a JS solution to set the element height/width better.
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
add a comment |
If you want to ignore all events that can scroll the body content, you can bind a function to the touchmove event that prevents default behavior and stop propagation of the event:
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
}, false);
In jQuery or similar libraries:
$(document.body).on("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
});
Link
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49349637%2fhow-to-prevent-pinch-to-zoom-on-scroll-on-safari-mobile-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Combined with the javascript preventDefault solution in your link; you can use the following to disable pinch in and out page-wide.
<style>
html,
body {
position: fixed;
overflow: hidden;
}
</style>
And wrap everything inside <body> in a master wrapper with the following CSS
<style>
.mainwrapper {
width: 100vw;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div id="master_wrap">
...content...
</div> <!-- /master wrapper -->
</body>
You in effect disable all body/html level scrolling, and then re-enable scrolling a level below inside the master wrapper, which includes elastic and momentum scrolling. When these elements scroll, the pinching is already ignored.
Drawbacks
1 - If you have fixed or absolute elements, then the scrolling becomes very janky.
2 - There also seems to be a strange bug where-by part of the page will be modified, and pinch becomes available again, if you scroll down from high on the page. I think it might be related to the vh property and there's probably a JS solution to set the element height/width better.
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
add a comment |
Combined with the javascript preventDefault solution in your link; you can use the following to disable pinch in and out page-wide.
<style>
html,
body {
position: fixed;
overflow: hidden;
}
</style>
And wrap everything inside <body> in a master wrapper with the following CSS
<style>
.mainwrapper {
width: 100vw;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div id="master_wrap">
...content...
</div> <!-- /master wrapper -->
</body>
You in effect disable all body/html level scrolling, and then re-enable scrolling a level below inside the master wrapper, which includes elastic and momentum scrolling. When these elements scroll, the pinching is already ignored.
Drawbacks
1 - If you have fixed or absolute elements, then the scrolling becomes very janky.
2 - There also seems to be a strange bug where-by part of the page will be modified, and pinch becomes available again, if you scroll down from high on the page. I think it might be related to the vh property and there's probably a JS solution to set the element height/width better.
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
add a comment |
Combined with the javascript preventDefault solution in your link; you can use the following to disable pinch in and out page-wide.
<style>
html,
body {
position: fixed;
overflow: hidden;
}
</style>
And wrap everything inside <body> in a master wrapper with the following CSS
<style>
.mainwrapper {
width: 100vw;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div id="master_wrap">
...content...
</div> <!-- /master wrapper -->
</body>
You in effect disable all body/html level scrolling, and then re-enable scrolling a level below inside the master wrapper, which includes elastic and momentum scrolling. When these elements scroll, the pinching is already ignored.
Drawbacks
1 - If you have fixed or absolute elements, then the scrolling becomes very janky.
2 - There also seems to be a strange bug where-by part of the page will be modified, and pinch becomes available again, if you scroll down from high on the page. I think it might be related to the vh property and there's probably a JS solution to set the element height/width better.
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
Combined with the javascript preventDefault solution in your link; you can use the following to disable pinch in and out page-wide.
<style>
html,
body {
position: fixed;
overflow: hidden;
}
</style>
And wrap everything inside <body> in a master wrapper with the following CSS
<style>
.mainwrapper {
width: 100vw;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
<body>
<div id="master_wrap">
...content...
</div> <!-- /master wrapper -->
</body>
You in effect disable all body/html level scrolling, and then re-enable scrolling a level below inside the master wrapper, which includes elastic and momentum scrolling. When these elements scroll, the pinching is already ignored.
Drawbacks
1 - If you have fixed or absolute elements, then the scrolling becomes very janky.
2 - There also seems to be a strange bug where-by part of the page will be modified, and pinch becomes available again, if you scroll down from high on the page. I think it might be related to the vh property and there's probably a JS solution to set the element height/width better.
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
edited Aug 14 '18 at 23:14
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
answered Aug 14 '18 at 23:09
Craig McArthurCraig McArthur
1721112
1721112
add a comment |
add a comment |
If you want to ignore all events that can scroll the body content, you can bind a function to the touchmove event that prevents default behavior and stop propagation of the event:
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
}, false);
In jQuery or similar libraries:
$(document.body).on("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
});
Link
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
add a comment |
If you want to ignore all events that can scroll the body content, you can bind a function to the touchmove event that prevents default behavior and stop propagation of the event:
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
}, false);
In jQuery or similar libraries:
$(document.body).on("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
});
Link
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
add a comment |
If you want to ignore all events that can scroll the body content, you can bind a function to the touchmove event that prevents default behavior and stop propagation of the event:
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
}, false);
In jQuery or similar libraries:
$(document.body).on("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
});
Link
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
If you want to ignore all events that can scroll the body content, you can bind a function to the touchmove event that prevents default behavior and stop propagation of the event:
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
}, false);
In jQuery or similar libraries:
$(document.body).on("touchmove", function(event) {
event.preventDefault();
event.stopPropagation();
});
Link
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
answered Nov 21 '18 at 17:52
Luanna IozziLuanna Iozzi
3816
3816
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49349637%2fhow-to-prevent-pinch-to-zoom-on-scroll-on-safari-mobile-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please don't do that, that breaks the expected behaviour, that is bad UX - if something is too small I want to zoom in on it.
– luk2302
Mar 18 '18 at 15:36
I know this is bad practice. But boss want this behavior.
– Ivan Cherevko
Mar 19 '18 at 15:28
6
This isn't a bad practice at all. That's just kool-aid from Apple masquerading as an accessibilty feature. The decision to enable or disable behavior of a web page must be left with web developers.
– marvindanig
Mar 31 '18 at 15:33