Disable Zoom for input fields in wordpress-woocommerce

Updated

Sometimes, in pages with input fields like in woocommerce checkout when clicking on an input field the screen zooms in.
There are two main solutions to this problem:
Mobile browsers typically zoom in on input fields with font sizes smaller than 16px. By setting the font size to 16px or larger, with the css below, you can prevent this behavior.

input {
    font-size: 17px !important;
}

Another solution you can try is this snippet, with this you can disable the default functionality, of zooming when you focus (click) on an input field in wordpress and woocommderce. It works for all the input fields on your site.

          

            Copy
            
          
          //disable zoom on mobile
function disable_mobile_zoom() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">';
}
add_action( 'wp_head', 'disable_mobile_zoom' );

          

            
              How to use this
            
            Copy