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.

Supercharge Your Divi Experience with WP Magic CTAs

Transform your Divi pages with WP Magic CTAs. Our AI-driven plugin creates customized, highly-targeted call-to-actions for each post, enhancing engagement and conversions without any additional effort. Perfect for enriching your Divi site's interaction while maintaining design control.

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 *.

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