How to disable multi-touch zoom in React JS

Question

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.

TylerH · Accepted Answer · 2025-02-14 21:19:38Z

9

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.

edited Feb 14 at 21:19

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Dec 16, 2020 at 23:31

morpet

1251 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KingJoeffrey Over a year ago

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

morpet Over a year ago

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.

Collectives™ on Stack Overflow

How to disable multi-touch zoom in React JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related