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
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;
}