React JS How to disable zoom

Question

Im building a web app and I want to disable the zoom with 2 fingers. I have tried this

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

but is not working. The app will run on tablets.

Thank you !

Legit

Answer 1

With the 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.

Solarize

Typo: meta tag missing closing bracket. – Balk

So does this go on the index.html after doing create react app? – Charleencharlemagne

I don't know exactly what you mean with "after create react app". You can put the <Helmet>-tag directly to your render() function in the component class. So it is after creating the react app and before the build. – Solarize