Enhancing the user experience on mobile devices often involves enabling intuitive gestures like pinch-to-zoom, which allows users to view and interact with your content easily.
In this article, we will guide you through the process of enabling pinch-to-zoom on mobile devices for your website.
Using a Child theme
Install and activate a Child theme
Go to WordPress Dashboard → Appearance → Theme File Editor
Open the functions.php file
Add this PHP code below the existing code
function remove_my_action() {
remove_action('wp_head', 'et_add_viewport_meta');
}
function dt_et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1, viewport-fit=cover" />';
}
add_action( 'init', 'remove_my_action');
add_action( 'wp_head', 'dt_et_add_viewport_meta' );Save your changes
Using the Code Snippets plugin
Install and activate the Code Snippets plugin
Create a new PHP snippet
Add this PHP code:
function remove_my_action() {
remove_action('wp_head', 'et_add_viewport_meta');
}
function dt_et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1, viewport-fit=cover" />';
}
add_action( 'init', 'remove_my_action');
add_action( 'wp_head', 'dt_et_add_viewport_meta' );Click on the Save Changes and Activate button
Note: Use one of the available methods that suits your case:
Use the first method if you already have a child theme enabled and active.
Use the second method if you don't have an active Child theme.