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">';
}Related Post: Adding PHP to the Divi Theme
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.
Thank you for the recommendation of Definitely allow mobile zooming, it worked great!
You're welcome, Esp :)
in your header just using doesn't work?
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!
It looks like this may have been addressed in Divi now.
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!
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!
You’re welcome, md51gnd. Glad it helps :)