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.
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.
23 Comments
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.
November 14, 2015
Thanks for taking the time to share John! Very helpful
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:
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.
January 25, 2017
John,
Could you please elaborate as to what needs to be after the Echo? I got confused, since you have a ”; after echo, and the article has the ‘ after echo.
Is it Echo”; ”;
Or is it Echo ”;
Thanks for the help!!! 🙂
January 2, 2018
Warning: the above code is buggy and will break your functions.php. Please can the OP check the code?
March 17, 2021
Hello. It did break my site and I don’t know how to fix it. Anyone can help please ? I’m getting a critical error now. THANKS !
January 16, 2023
…try replacing ‘ (apostrophe) with single quotation marks (double quotation marks should work as well… but you need to replace it completely everywhere in the code.
June 5, 2023
The bit after ‘ECHO’ should be as in your article, but your blog stripped it out.
November 14, 2015
thank you!
January 5, 2016
It works great! Thanks a lot
October 12, 2016
THANK YOU! FIXED IT <3
December 19, 2016
If you prefer to work without a child theme, and don’t feel very comfortable writing PhP, this tiny plugin does the trick even easier: https://wordpress.org/plugins/definitely-allow-mobile-zooming/
January 6, 2017
Ruud thanks a lot!
Plugin helps me 😉
June 11, 2020
Great article! Had this issue and your article helped me fix it! Thanks so much!
December 3, 2017
Excellent, keep it up
July 29, 2018
Wow.. I was just finding some tweam to do this for many days. Thanks alot for solving this issue.
August 28, 2018
Hi,
I tried pasting in my child functions.php
“// 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_4(){
echo ”;
}
add_action( ‘wp_head’, ‘et_add_viewport_meta_4’ );”
Also tried with meta_2
Doesn’t seem to help.Does it take time or did I do anything wrong.Please help.Thanks
June 27, 2019
If you have used the above code from John Dray, and find it does not work, then the problem may be due to the type of apostrophe used by your editor when updating the child theme functions.php file. Change the curly apostrophe to a straight apostrophe and it should then work ok.
January 27, 2022
<?php
// 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');
// add ability to pinch and zoom
function et_new_viewport_meta(){
echo '’;
}
add_action( ‘wp_head’, ‘et_new_viewport_meta’, 15 );
November 8, 2022
Hello. I tried this code in my functions child theme and it broke my site and I don’t know how to fix it. I’m getting a critical error now on wordpress with no idea on how to fixe this. I tried reuploading the previous functions.php through ftp, but didn’t change a thing. PLEASE HELP THANKS !
January 16, 2023
thank you for the help. this worked great for me!
February 11, 2023
divi disables one of important setting against other web sites and themes. well done, divi.
July 15, 2023