Archived topic
Can't override viewport meta
9 replies · Started by Danny on March 21, 2022
Hi,
I tried many different tactics for overriding the viewport meta tag but the first tag in the DOM always gets overridden to the default
https://i.imgur.com/v0HFKPN.png
here I tried with:
element hook
overriding the file in the theme "inc/structure/header"
overriding via a filter:
remove_action( 'wp_head', 'generate_add_viewport');
add_action( 'wp_head', 'generate_add_viewport_adjusted', 2);
function generate_add_viewport_adjusted() {
echo apply_filters( 'generate_meta_viewport', '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" test="functions file">' );
}as you can see in the screenshot above "maximum-scale=1" is missing from the first one... whatever I try this is always the case and I left multiple options on the site at the same time just to help me troubleshoot, I initially tried these one by one and just wasn't seeing any differences
I have tried disabling plugins one by one to try and pinpoint to a conflict but there were no changes. I am downloading all files to try and search through the code to find what might be overidding this. I already did this for the child theme and there is nothing in there in regards to the viewport other then the code I added to the functions file just now...
Hi there,
you can just filter it with the generate_meta_viewport filter
https://docs.generatepress.com/article/generate_meta_viewport/
And here you can see an example of its use:
https://generatepress.com/forums/topic/disable-mobile-view/#post-1746812
Hi David,
Yes, that is the first thing that I tried and it is one of the options which is active at the moment but something else always overrides the content parameter of the first viewport meta in the DOM... I am clueless why and how so far.
Something seems to be working (?)
well I am adding the following content:
width=device-width, initial-scale=1, maximum-scale=1
it is being overidden by:
width=device-width, initial-scale=1
as you can see the ", maximum-scale=1" part is always missing... and if you take a look at my original post this is the case even if I override the inc/structure/header.php in the main theme
If i check the source code i see:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" test="elements hook">
So the hooks are working - it just looks like the browser don't like it so is stripping it out when the DOM is rendered. It could be because maximum-scale=1 has negative impact on accessibility as it disables things like pinch scaling and other zoom tools that assistive techs use. I know in the past Lighthouse would flag any scale value below 5 as an issue. Maybe the upped the ante on this.
Yeah it doesn't alter anything but the first meta viewport
To rule out the browser, if I do a simple test with a HTML file it looks fine in my chrome https://i.imgur.com/wH7lA9E.png
Could be something else on your site, i used just this filter snippet:
add_filter( 'generate_meta_viewport', function() {
return '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" test="elements hook">';
} );And this is the result:
Hey David,
It was another plugin, weirdly the issue was persistent when I turned it off before writing here. No idea why it is overriding it so hard but will resolve with them.
Thanks for the help!
Glad to hear you found the issue
