Preventing mobile zoom in form fields, etc.

That works, but it would be better to filter the one that GP adds so you don't have both:

add_filter( 'generate_meta_viewport', function() {
    return '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0" />';
} );

Hey, I have this same issue. But when I add it as a sitewide hook, the hook text displays above the header and doesn't create change on the page. (I have removed for now)

The page I have the zooming issue on is my checkout pages: https://www.theshapingbay.com/checkout/

My shop setup using the bigcommerce for Wordpress plugin, and the cart embeds an iframe onto the checkout pages.

Am I perhaps better off using CSS to increase the font size above 16px as per this article: https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone/6394497#6394497

Or using the function suggested in this thread (which doesn't seem to work for me, not sure what I am missing)

Thanks for your help :)

Hi Justin,

How are you adding the filter hook?

Hey Fernando. In elements: Hook - wp-head

Adding this code suggested above:

add_filter( 'generate_meta_viewport', function() {
return '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0" />';
} );

Display rules: Entire site

Thanks for your help

Can you try adding it through Code Snippets or functions.php if you’re using a Child theme?

Hey Fernando - I'm not using a child theme currently. Bigcommerce just embeds the iframes onto the relevant checkout pages.

How would I add the code through snippets? Would I need to change the code or just input it exactly as I had it in the head?

Code snippets reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Enter the code as is.

Great thanks for your help Fernando :~)

You’re welcome Justin!