0

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

std124_lf
  • 134
  • 2
  • 9
  • 1
    Can you make the links clickable to open separately, and have those be zoomable (e.g. don't block when viewing just the images) – scunliffe Feb 08 '22 at 18:50
  • Just to add, Image is part of the page and the meta applies to complete page including the tags in it, like img. So this wont work with your current setting. – M.Sharma Feb 08 '22 at 19:01
  • @M.Sharma thanks for replying, I know this won't work, I've already tried, just I need a solution and I'm looking for it – std124_lf Feb 08 '22 at 19:12
  • @scunliffe this doesn't sound a good look to the eyes for a user mobile experience – std124_lf Feb 08 '22 at 19:13
  • 1
    You can set a click handler for the images which would put the image on a lightbox and temporarily change the `content` attribute of the `` tag, then change it back once the lightbox is closed. By the way, on my mobile Chrome I found a setting that overrides the `` tag and always allows me to zoom in. Huh that was a huge reliefe! I strongly dislike that sites are blocking it. – Noam Feb 08 '22 at 19:38
  • @Noam that's a good idea but is not what I really want, it wouldn't look like what a user would expect – std124_lf Feb 08 '22 at 19:45
  • How **do** you want it to work? I am a bit confused. – Noam Feb 08 '22 at 19:58
  • In the best case, I want nothing but the images to be zoomed, instead of the other parts of my pwa just like there was the meta tag with no scalability. – std124_lf Feb 08 '22 at 20:02
  • This might all be moot, in later iOS versions (iOS 10+) Apple is disabling the blocking of this anti-zoom option for accessibility purposes: https://stackoverflow.com/a/38852262/6144 – scunliffe Feb 08 '22 at 21:53

1 Answers1

0

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;
}
Marek Kamiński
  • 409
  • 5
  • 11