Divi Design Tips Blog

Quick Code Tips (#01) : Enable Mobile Pinch On Divi Website

Here's how we used some simple code to enable mobile pinch zoom on a Wordpress Divi website.

What We Created: A website in divi that allows mobile pinch zoom
How We Did It: WordPress, Divi, Quick code
Main Features: Better UX and mobile display
Plugins We Used:

No plugins needed for this.

See It In Action

Use this simple code to enable mobile pinch zoom on a Divi WordPress website…

Add this code (from the Elegant Themes website) to the Functions.php file of your child theme.

//Mobile Pinch Zoom

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=3.0, user-scalable=1″ />’;
}
add_action( ‘init’, ‘remove_my_action’);
add_action( ‘wp_head’, ‘custom_et_add_viewport_meta’ );

Try it on this very webpage 😉

DESIGN TIP

Enabling mobile pinch highlights the need for decent quality images on your website – using well-optimised files and decent compression plugins will help.

About The Divi Design Tips Blog

We use Divi as our primary way to build WordPress websites. Our main focus in always on the design, ‘look and feel’ and the user experience of the websites we create. 

The Divi Design Tips Blog isn’t intended as a how-to-use Divi guide, as there are loads of great resources out there for that already. 

Instead, we launched the blog series as our way of giving an insight into some of the ways we use Divi, associated plugins, and custom CSS, Javascript and PHP, to get things looking – and working – how we want them for our clients.