How to disable page scrolling without hiding the scrollbars
This is useful when showing an overlay dialog box, in order to prevent the content underneath to scroll. While adding a simple class...
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.
2015-2021 Line22 SRL - All Rights Reserved
Leave a comment
You must be logged in to post a comment.