Disable zoom on input focus in Android webpage

Question

Here\'s the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I

Answer 1

I had the same problem (only in Android chrome browser). I solved the issue like this.

1. Detected the userAgent, and bind the onFocus and onBlur events of the text fields to change the viewport meta content as follows

   if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
   isAndroidChrome = true;    
   }
   var viewportmeta = document.querySelector('meta[name="viewport"]');
   

2. onFocus of the text field, I set the following viewport meta content viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';

3. onBlur of the text field, I am resetting the viewport meta content to viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4'; you can set the maximum-scale if you wish, or if you want it to be user-scalable, don't set maximum-scale

When you change the trigger the onFocus event of the input, if the maximum-scale is 1, it doesn't zoom in. This worked for me like a charm. Hope it works for you too.