Search code examples
javascriptreactjszoomingmeta-tags

How to disable multi-touch zoom in React JS


I'm building a web app and I want to disable zooming with multi-touch. I have tried this

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

but it's not working. How can I implement this? The app will run on tablets.


Solution

  • With React-Helmet you can put your metadata in the render-function of your Component like this:

    render(){ 
        return <div>
            <Helmet>
                  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
            </Helmet>
            [...]
        </div>
    }
    

    Look at the Helmet documentation for further information.