How to disable mobile zooming in wordpress admin?

So I’ve removed the viewport from /wp-admin/admin-header.php and installed my own viewport via admin_head action:

add_action('admin_head','CustomHead',1,1);

That’s my viewport

Read More
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width, user-scalable=no" />

Works fine so far. I did the same with wp_head to test it and it works as expected on the frontend. But it’s just getting ignored on the backend.

I’m not very experienced with viewports. Are there any other techniques (dis)allowing to zoom on mobile devices?

Well I know it’s not recommend to disable the zooming function. Anyway, I want to know why it’s not working 😉

Related posts

Leave a Reply

2 comments

  1. You can disable the zoom by adding user-scalable="no" on your viewport meta.

    eg:

    <meta name="viewport" content="maximum-scale=1.0, user-scalable=no">
    

    Even if it’s very frustrating to disallow the zoom for the user, here’s how to do it. On this eg, you will just disable the zoom, it’s up to you to add others settings such viewport width, etc.

    Here’s a great tutorial from css-tricks.com explaining well the meta viewport

  2. @Brettetete:
    i looked for any hook but found nothing. i really don’t want to change anything in core files, due updates they are been overwritten.

    so i finally ended and wrote this little workaround. by modifying viewport via javascript after page is loaded. used jquery, but you could also use plain javascript.

    hope this helps..

    function custom_header_content() {
    ?>
        <script>
            jQuery(function($) {
                $("[name='viewport']").attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
            });
        </script>
    <?php
    }
    
    add_action( 'wp_head', 'custom_header_content' );
    add_action( 'admin_head', 'custom_header_content' );