The 'wp-admin/admin-header.php' file outputs 'viewport' meta data. It seems the value of the viewport is hard coded into the file. (See: .php line 89).

I want to edit the viewport from my custom plugin. Are there any suggestions as to how this could be done?

Any code injected via the hooks that follow the hardcoded viewport data has no effect and I cannot see any available hooks inside the section that occur before the hardcoded data.

The 'wp-admin/admin-header.php' file outputs 'viewport' meta data. It seems the value of the viewport is hard coded into the file. (See: https://github.com/WordPress/WordPress/blob/master/wp-admin/admin-header.php line 89).

I want to edit the viewport from my custom plugin. Are there any suggestions as to how this could be done?

Any code injected via the hooks that follow the hardcoded viewport data has no effect and I cannot see any available hooks inside the section that occur before the hardcoded data.

• wp-admin
• headers
• custom-header

• $('head').remove('OLD_VIEWPORT').append('NEW_VIEWPORT'); – Max Yudin Commented Mar 8, 2019 at 16:40
• Will this jQuery be executed in time so as to take effect on the clients browser? – Scratcha Commented Mar 8, 2019 at 17:13
• 1 Umph, actually no. My bad. I'll come out with better solution. – Max Yudin Commented Mar 8, 2019 at 17:53

2 Answers 2

There's a new filter admin_viewport_meta in WordPress 5.5 - https://developer.wordpress.org/reference/functions/wp_admin_viewport_meta/

Now you can change viewport:

function my_meta_viewport() {
    return 'width=980,initial-scale=1.0'; // your value
}
add_action( 'admin_viewport_meta', 'my_meta_viewport' );

As was said, <meta name="viewport" /> is hardcoded, but fortunately it's done before admin_head hook is fired.

It means you can override the hard-coded meta:

<?php

function my_meta_viewport() {
    echo '<meta name="viewport" content="width=640,initial-scale=1.0"><!-- Added -->';
}
add_action( 'admin_head', 'my_meta_viewport' );

?>

Which will result in something similar to the following HTML:

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=640,initial-scale=1.0"><!-- Added -->

where the first (hard-coded) <meta name="viewport" /> will be ignored by the browser because of the second.