Disabling iOS and Android zooming for the WordPress Admin Dashboard

• Marco Traverso
• March 5, 2015
• WordPress
• views

When using the standard WordPress admin dashboard using a mobile browser on a smartphone the automatic zoom functions – activated for example when clicking in the text editor – can make it difficult to edit posts and using the interface.

In this case a possible solution is to disable the zoom control for the dashboard area only.

In order to do it, we can load a script that adds the necessary code to the page DOM using jQuery.

First, let’s create the actual javascript code, and save the script as /js/admin-custom.js within the theme folder.

Please notice that in order to use jQuery in the admin pages, we need to replace the $ symbol with the extended word ‘jQuery’ – read this article for more info.

jQuery(document).ready(function () 
{
  jQuery('head meta[name=viewport]').remove();
  jQuery('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />');  
});

Secondly, we need to load this script using wp_enqueue_script() in the functions.php template file.

function custom_register_admin_scripts()
{
  wp_register_script( 'custom-admin-javascript', get_template_directory_uri() . '/js/admin-custom.js' );
  wp_enqueue_script('custom-admin-javascript');
}
add_action( 'admin_enqueue_scripts', 'custom_register_admin_scripts' );

And that’s it! Now you should be able to browse the WordPress admin dashboard using a mobile browser such as iOS Safari or Google Chrome for Android.

In order to further improve WordPress’ mobile user interface, you can also setup a custom css style for working with large images in the text editor box.