Add ability to zoom on mobile devices and tablets

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

20% Discount!!!
Divi WordPress Theme

Divi requires no special coding to make it look great on mobile devices. Everything created within the Page Builder is automatically mobile responsive. One of the few downsides is that it does not allow users to zoom in on text or images on mobile devices. This quick tweak easily fixes that problem.

PHP

Locate the functions.php file in the /themes/Divi/ folder

Find the following code around line 160:

function et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
}

Change it to this:

function et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1" />';
}

The maximum-scale=2.0 part of this code allows the user to zoom in 2x. You can change this to a higher number if you want your users to be able to zoom in more. The user-scalable=1 part of this code is what allows users to zoom. Zero stands for false and 1 stands for true.

You'll notice I edited this code directly in the parent theme's functions.php file instead of using a child theme. This means if you ever decide to update Divi, you'll likely have to go back and make this change again as the update will probably overwrite the functions.php file. There are ways around this but they are not worth the effort. The best thing to do would be to create a .txt file with any changes you make to the functions.php file for reference and store it in the child theme folder or simply put comments at the top or bottom of the child theme's style.css file.

 

    8 Comments

  1. Worked out how to put this in a child functions.php

    Thought I would share!

    // Removes et_add_viewport_meta from the wp_head phase
    function remove_divi_actions() {
    remove_action( ‘wp_head’, ‘et_add_viewport_meta’ );
    }

    // Call ‘remove_divi_actions’ during WP initialization
    add_action(‘init’,’remove_divi_actions’);

    function et_add_viewport_meta_2(){
    echo ”;
    }
    add_action( ‘wp_head’, ‘et_add_viewport_meta_2’ );

    Hope that is useful.

    John Dray

    November 14, 2015

    • Thanks for taking the time to share John! Very helpful

      Brad (admin)

      November 24, 2015

    • Forgive my ignorance, but would love to take advantage of your suggestion, but do not understand where I place or replace the code you suggest in my child theme’s functions.php file:

      David Andora

      January 13, 2016

      • Even though its a bit late, i’ll post that for users that stumble upon this now.

        If you want to make changes to some PHP files, its better to create, or download a child theme. Personaly i use a child theme from Monterey Premier. Its free and easy to install/use.

        The reasons you need a child theme are a lot. The main reason though is that if you don’t use a child theme and you have some of your code in divi themes main php files then your code will be replaced on the next divi update with the default one. If you use a child theme though it will persist.

        So , since you have your child theme setup, copy the php files that you want to edit from divi directory to your divi child theme directory, then edit them and add or remove the desired code, save and you are good to go.

        Theo

        January 25, 2017

  2. The bit after ‘ECHO’ should be as in your article, but your blog stripped it out.

    John Dray

    November 14, 2015

  3. thank you!

    Jennifer Klar

    January 5, 2016

  4. It works great! Thanks a lot

    Maria Luisa Fonseca

    October 12, 2016

Post a Reply

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