2

The issue is mobile browsers will zoom in an input field or select drop-down on focus. I've looked into different solutions and so far the most elegant I found does it with setting a font-size of an input field to 16px. This works fine on a standalone input field but if you have a parent container which incorporates a button, after changing font-size to 16px will make a bit of a gap under the button.

Another solution would be to set a default font-size for input fields to 16px and adjust a button size correctly.

Setting a font-size to 16px doesn't prevent select drop-downs from zooming though.

CyberRobot
  • 686
  • 9
  • 20
  • 1
    http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page – marekful Jun 19 '14 at 15:15
  • http://stackoverflow.com/questions/8154505/how-can-i-force-a-site-to-scale-to-fix-for-mobile-iphone-android @MarcellFülöp beat me to it... – Kodlee Yin Jun 19 '14 at 15:40
  • I think we shouldn't fully restrict mobile users from zooming in. Otherwise this solution would be ideal. The idea is to prevent from zooming on input fields and select drop-downs only. – CyberRobot Jun 19 '14 at 15:45

1 Answers1

1

You can do it this way:

 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Fabián Rodríguez
  • 425
  • 4
  • 14