How to Fix the ‘user-scalable=no’ Accessibility Error in Divi (One Simple Code Snippet)

The user-scalable="no" problem in Divi - and how to fix it fast

You know that moment when you proudly run your freshly built Divi site through Google PageSpeed... and there it is - same accessibility error appears every time:

"user-scalable="no" is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5."

Ugh. Really, Divi?

The good news? This one's super easy to fix. Just a tiny code snippet - and your site becomes more standards-compliant (and scores better, too). In this post, I'll show you:

• Why this error happens
• Whether it actually matters
• And how to fix it - in under 5 minutes. No plugin bloat, no theme-breaking drama. Let's go!

First things first: why is this even a problem?

Out of the box, Divi adds this line in your site's <head>:

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

Which basically tells mobile browsers: "Hey, don't let users zoom."

Now, here's the thing: Most modern mobile browsers ignore that instruction anyway. Chrome and Safari on iOS and Android typically allow users to zoom even when user-scalable=no is present.

So why does Google PageSpeed complain?

Because technically, this tag violates accessibility best practices. It restricts zooming - something that's essential for users with visual impairments. So even if it doesn't block pinch-to-zoom in practice, it's still flagged as a potential issue in audits.

Bottom line: this fix won't suddenly make your site feel different on mobile, but it will clean up your PageSpeed report and align your site with WCAG guidelines.

The fix: allow zooming with one simple code snippet

We'll replace Divi's default viewport tag with one that's more accessibility-friendly:

// Allow scaling to improve accessibility

function remove_et_add_viewport_meta_action() {
    // Make sure the action is removed after Divi hooks in
    remove_action('wp_head', 'et_add_viewport_meta');
}
add_action( 'wp_loaded', 'remove_et_add_viewport_meta_action' );

function custom_et_add_viewport_meta(){
    // Output the custom viewport meta tag
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />';
}
add_action( 'wp_head', 'custom_et_add_viewport_meta' );

Where to add it? You have two options:

1. In your child theme's functions.php (If you're using a child theme - nice!)
2. Or use a plugin like Code Snippets - this is the easiest and safest way to add PHP code, no editing files, no stress.

And lately, my favorite snippet manager (shared by one of my awesome Divi Stylist Academy students!) is: Fluent Snippets - lightweight, reliable, and works beautifully with Divi.

What happens next?

After adding the code:

• Google PageSpeed will stop flagging this as an accessibility issue
• Your <head> will output a more WCAG-friendly meta tag
• You'll be just a bit closer to having an inclusive, audit-passing website

It's a small fix - but if you're working with client sites or optimizing for top scores, it's worth doing.

Looking for more quick wins for accessibility?

Check out this beginner-friendly guide full of practical tips: How to Make Divi Sites More Accessible (Simple Tips for Beginners)

Have questions or need a hand adding the snippet? Get in touch and I'll help you sort it out.