Enable Mobile Pinch Zooming in Divi

Written by Dan Mossop

By default, the Divi Theme disables "pinch" zooming on mobiles. While this gives you more control over how your site appears to users, it can hurt accessibility as vision impaired users will be unable to zoom in to view content.

Google's Lighthouse website auditing tool, will report a site with zooming disabled as an accessibility fail, like so:

The follow methods will let you enable zooming, pass this Lighthouse accessibility check and adhere to accessibility best practice.

Enable Zooming using Definitely Allow Mobile Zooming

If you'd like to enable pinch zooming, you can either use a plugin such as Definitely allow mobile zooming, or use the following PHP code:

Enable Zooming using Divi Booster

If you are using Divi Booster, you can enable zooming using the following setting:

Divi > Divi Booster > Site-wide Settings > Accessibility > Enable Zooming

Enable Zooming using PHP

You can manually enable zooming use the following PHP code:

add_action('after_setup_theme', 'db_remove_et_viewport_meta');
add_action('wp_head', 'db_enable_pinch_zoom');

function db_remove_et_viewport_meta() {
	remove_action('wp_head', 'et_add_viewport_meta');
}

function db_enable_pinch_zoom() {
	echo '<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=0.1, maximum-scale=10.0">';
}

Both the plugin methods and the PHP code add a "meta tag" to the source code your web pages which instructs mobile devices to enable pinch zooming.

A slight benefit of the Divi Booster / PHP code over the Definitely allow mobile zooming plugin is that it will also remove the meta tag Divi adds to prevent pinch zooming, and thus avoid having an unnecessary extra meta tag showing up in the source code.

We may earn a commission when you visit links on our website.

Check out Divi Booster

Divi Booster upgrades Divi with hundreds of new features to help you build awesome sites with ease.

Latest Posts

Adjust Lightbox Arrow Size in Divi Gallery

Customize the size of the navigation arrows that appear in your gallery lightbox so they’re easier to see and aligned with your site’s design. Whether you want larger, more accessible controls or a subtler look, setting a precise arrow size creates a more polished...

Change Lightbox Arrow Color in the Divi Gallery Module

Make the lightbox navigation arrows in your Divi Gallery match your brand and stand out against your images by assigning a custom color. This improves visual consistency, enhances accessibility with better contrast, and elevates the overall browsing experience for...

Change the Divi Gallery Module Grid Image Scaling

Divi’s Gallery module offers a great way to showcase images, but it can sometimes stretch or crop them in unwanted ways. This article explains how to manage the module’s image scaling behavior to ensure your images are displayed at the correct size and aspect...

Set Custom CSS IDs for Individual Divi Accordion Items

Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...

Enable Swipe Navigation in the Divi Gallery Lightbox

Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

8 Comments

  1. Thank you for the recommendation of Definitely allow mobile zooming, it worked great!

    Reply
    • You're welcome, Esp :)

      Reply
  2. in your header just using doesn't work?

    Reply
    • Hey Brian, thanks for the comment. However I think any code you included was stripped out. Is there any chance you can resend it, leaving out the less than (“<“) and greater than (“>”) characters? That should hopefully stop the code from getting treated as html and stripped out. I’ll add them back in when I publish. Thanks and apologies!

      Reply
  3. It looks like this may have been addressed in Divi now.

    Reply
    • Hey Parker, I'm not so sure that it has. I can see the following meta being added by Divi on my test sites, on your Aligned Online site and in the latest Divi source (v4.14.9):

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

      This disables user scaling and sets the max scale less than 5, both of which cause the fail in Lighthouse. I've just confirmed the latest version of Divi still triggers the lighthouse fail.

      Was there a particular reason you think it has been addressed? If you're seeing a different viewport meta tag on the site you're working on, perhaps the Divi Booster / PHP fix is already in place, or some other plugin is making the fix? If you're able to send through a link to the site you're working on I'd be happy to take a look and see if I can figure out what's going on. Cheers!

      Reply
  4. Thank you for adding this to Divi Booster, brilliant. I contacted ET support a while back about this and they provided some code to override it which I have to manually add to sites but as always you make things so easy – tick the box, job done!

    Reply
    • You’re welcome, md51gnd. Glad it helps :)

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.