HTML disable zoom on page apart from the images

Question

I'm creating a simple PWA, and I'm trying to make it looks like a native mobile application though I'm having several problems with the pinch-in.

I've added this code to my layout.html (I'm using Flask for the backend)

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

Although it really works as I want, there are some images that I want the user to be able to zoom in, and I know is not recommended to disable the scalable zoom for mobile but really, this is what I want, no zoom on the entire page apart from the imgs tag I have. I'd like to have a pure css/js solution or at most something that does not need npm even a cdn is good for me

Answer 1

Set height and/or width of elements that ARE NOT images to vh or vw.

https://www.w3schools.com/cssref/css_units.asp vh - viewport height - represents fraction of screen height. When you zoom in - (for example) font stays the same size

div {
   font-size: 2vh;
}