Disable the effect of the meta tag for viewport with bare css

Question

Is it possible to disable the effect of the meta tag for viewport with bare css?

I have the following tag in the head of my html:

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

Now I open the html on tablet. I have an image which takes the full screen once clicked. I can not pinch zoom the image on tablet until the meta viewport is not removed. Once it is removed I get the desired pinch zoom behavior.

I understand how the meta viewport works. Due to the project size (it is large, there are a lot of pages which rely on the tag already) I can not remove the meta tag at all.

Also, I would like to avoid removing the tag with a script once the image is opened and adding it back once the image is closed.

That is why I am interested that maybe someone knows a css solution.

Thank you.

Answer 1

You can use this code

 <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'/>