I want to disable zoom in flutter web. I have tried these things:-
1) Added below code to index.html file
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I want to disable zoom in flutter web. I have tried these things:-
1) Added below code to index.html file
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But it gave me the following warning and didn't disabled the zoom.
WARNING: found an existing <meta name="viewport"> tag. Flutter Web uses its own viewport configuration for better patibility with Flutter. This tag will be replaced.
2) Added the below code to index.html in body tag:-
<script>
document.addEventListener('wheel', function(e) {
e.ctrlKey && e.preventDefault();
}, {
passive: false,
});
</script>
It disabled the zoom with ctrl and mouse scroll but not the zoom with ctrl + for zoom and ctrl - for zoom out.
SO, can you please tell how can i disable zoom in and out in my web for all platforms i.e desktop, android and ios.
Share Improve this question asked May 21, 2021 at 14:45 Deepak LohmodDeepak Lohmod 2,2822 gold badges11 silver badges22 bronze badges1 Answer
Reset to default 7I found the answer to disable zoom in both mobile and desktop by adding following javascript code in the body of index.html file:-
<script>
document.addEventListener('wheel', function(e) {
e.ctrlKey && e.preventDefault();
}, {
passive: false,
});
</script>
<script>
window.addEventListener('keydown', function(e) {
if (event.metaKey || event.ctrlKey) {
switch (event.key) {
case '=':
case '-':
event.preventDefault();
break;
}
}
});
</script>