Unable to remove zoom in and zoom out in my flutter web
I 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>
Deepak Lohmod
I love developing flutter apps. I am aiming to serve back to dev community via answering queries on StackOverflow and public projects on GitHub. Need any help? You can find me at:- https://www.linkedin.com/in/deepaklohmod/
Updated on December 29, 2022Comments
-
Deepak Lohmod over 1 year
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 compatibility 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.