How to Enable Pinch-to-Zoom on Your Divi WordPress Website

Are you using the Divi theme for your WordPress website and want to give your visitors the freedom to pinch and zoom for a closer look? Pinch-to-zoom can enhance user experience, especially for those who prefer to control their viewing experience. In this tutorial, we’ll walk you through the process of changing the meta viewport settings in Divi to enable pinch-to-zoom effortlessly.

Understanding the Code

First things first, let’s understand the code we’ll be working with. Divi adds a default meta viewport tag to your website’s header to ensure proper scaling on mobile devices. However, to enable pinch-to-zoom, we need to override this default setting by modifying the maximum-scale and user-scalable attributes.

Here’s the default code added by Divi (in /wp-content/themes/Divi/functions.php):

function et_add_viewport_meta(){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
}
add_action( 'wp_head', 'et_add_viewport_meta' );

Here’s the code you’ll need to override it from Elegant Themes:

Reference: https://help.elegantthemes.com/en/articles/2190905-how-to-enable-pinch-to-zoom-on-mobile

function remove_my_action() {
    remove_action('wp_head', 'et_add_viewport_meta');
}
function custom_et_add_viewport_meta(){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />';
}
add_action( 'init', 'remove_my_action');
add_action( 'wp_head', 'custom_et_add_viewport_meta' );

Notice how we’ve changed maximum-scale to 2.0 and user-scalable to 1, allowing for zooming up to 200% and enabling user scalability. You may need to play around with the maximum-scale value, but I’d suggest sticking to values between 2.0 – 5.0.

Implementing the Code

Now, let’s get down to business. I’ll guide you through two simple methods to add the code to your Divi website:

Option 1: If you’re already using a Child Theme

1. Access your WordPress dashboard and navigate to Appearance > Theme Editor.
2. Make sure your Child Theme is selected, then locate and click on the “Theme Functions” (functions.php) file on the right-hand side.
3. Copy and paste the override code provided above at the end of the functions.php file.
4. Save the changes.

Option 2: Using the WPCode Plugin

1. Install and activate the WPCode (formerly known as Insert Headers and Footers) plugin from the WordPress repository (https://wordpress.org/plugins/insert-headers-and-footers/)
2. Once activated, go to Settings > Insert Headers and Footers.
3. Paste the override code into the “Scripts in Header” section.
4. Save the changes.

That’s it! You’ve successfully enabled pinch-to-zoom on your Divi website. Now, visitors can zoom in and out to their heart’s content, enhancing their browsing experience.

Conclusion

By tweaking the meta viewport settings in your Divi theme, you can cater to diverse user preferences and improve accessibility. Whether you choose to modify the code directly or use a convenient plugin like WPCode, enabling pinch-to-zoom is a simple yet effective way to enhance user interaction on your website.

Unsure whether you should enable pinch-to-zoom? Dive into my previous blog post and explore the implications and advantages before making your decision – Understanding the Meta Viewport Tag: Enabling or Disabling Pinch-to-Zoom for Mobile Websites