The Divi theme works great on mobile devices. But it specifically disables the pinch and zoom feature by including this meta tag in the header:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Why Pinch and Zoom Should Be Enabled

Some purists will argue that a well-designed responsive website doesn’t need pinch and zoom. It seems to me that the feature should be available to those who want to use it. I’ve personally been frustrated by websites not supporting pinch and zoom when I needed to see more detail in a photo or when I was browsing without my glasses and couldn’t quite make out the text.

I’ve had others argue that enabling pinch and zoom would hurt SEO. Their argument started with the assumption that having pinch and zoom enabled would be interpreted by Google that the website was not responsive design. I’ve run Google’s latest Mobile Friendliness Test on websites configured as I describe and passed with flying colors.

I should point out that Elegant Theme’s website used to have pinch and zoom disabled. In their recent redesign, they have enabled pinch and zoom.

If you are still unconvinced, then I recommend that you visit google.com. Even Google has pinch and zoom enabled.

How to Enable Pinch and Zoom

Adding the ability for mobile users to pinch and zoom is relatively straightforward. It requires only a small snippet of code in the functions.php file of your child theme.

/* Enable Pinch and Zoom on mobile devices */
function disable_et_add_viewport_meta() {     //disable Divi's viewport meta
    remove_action( 'wp_head', 'et_add_viewport_meta' );
}
add_action( 'after_setup_theme', 'disable_et_add_viewport_meta');

function add_pinch_zoom_viewport_meta(){      //insert viewport meta that support pinch and zoom
    echo '<meta name="viewport" content="width=device-width" />';
}
add_action( 'wp_head', 'add_pinch_zoom_viewport_meta');

Summary

Adding pinch and zoom to your website takes a few moments, but it will avoid the possibility visitor getting frustrated if you leave the option disabled.

One note: If your website has a cache installed, be sure to purge it after making this change.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This