trying to prevent zooming on a page in Chrome on Android, and it doesn't want to behave. I'm using the code below, which works fine on the stock Android browser and Safari on iOS. Any thoughts?
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Click the three vertical dots in the top right of your Chrome browser. In this drop-down menu, click “Settings.” Scroll down to the “Appearance” section. Open the “Page Zoom” drop-down menu and select the zoom setting that's best for you.
Android provides its users a feature to magnify and zoom in display in their Android phone. This is to increase visibility for individuals with eye sight problems.
We can use the <meta> tag to disable zoom in and out on a mobile web page.
Try adding minimum-scale=1
to your viewport
meta tag - if that doesn't help, it's likely that disabling zoom isn't supported by Chrome for Android (HTC's proprietary browser intentionally doesn't allow you to disable zoom, for instance)
Update: I just checked, and it looks like Chrome does support disabling zoom, but you have two viewport tags in your code? The second one is likely overriding the first. Remove the second one.
See this list of mobile browser support for disabling zoom for details and a good suggestion for disabling zoom across multiple browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With