[Support request] Preventing mobile zoom in form fields, etc.

Home Forums Support [Support request] Preventing mobile zoom in form fields, etc.

Home Forums Support Preventing mobile zoom in form fields, etc.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1409767
    Craig

    Hi GP Support –

    I am trying to prevent any zooming when a user clicks into a form field.

    I’ve set up an element Hook (wp-head) and set it to Display Entire Site.

    I’ve put this into the Hook:

    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0″/>

    Is this right/correct? Seems to work, just not sure if I am causing damage elsewhere?

    Thanks so much!

    #1410097
    Tom
    Lead Developer
    Lead Developer

    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" />';
    } );
    #2308455
    Justin

    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 🙂

    #2308463
    Fernando
    Customer Support

    Hi Justin,

    How are you adding the filter hook?

    #2308466
    Justin

    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

    #2308473
    Fernando
    Customer Support

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

    #2308485
    Justin

    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?

    #2308491
    Fernando
    Customer Support

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

    Enter the code as is.

    #2308493
    Justin

    Great thanks for your help Fernando :~)

    #2308499
    Fernando
    Customer Support

    You’re welcome Justin!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.