2

I'm working on a responsive website that is currently set to not be user scalable, using the following META tag:

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

However, I want images to be scalable, and I don't want to use JS to achieve that.

I tried several approaches, none seem to work.

In my current approach I'm opening the images in fullscreen using the HTML5 fullscreen API. I was hoping that once they're in fullscreen I'd be able to scale the images by pinch zooming with mobile devices. That didn't work... Even after altering the meta tag to allow user scaling, the page itself is scalable, but the images in fullscreen are not.

Is there a way to support scaling on an element that is in fullscreen mode?

Another approach I was testing is loading the image in an iframe and then the iframe would support scaling, but apparantly the iframe's behavior is derived from the original frame, which is unscalable.

Any other ideas would be appreciated.

Niro
  • 314
  • 1
  • 4
  • 25
  • Possible duplicate of [The values of meta viewport attribute are not reflected when in full screen mode in android chrome browser](https://stackoverflow.com/questions/47954761/the-values-of-meta-viewport-attribute-are-not-reflected-when-in-full-screen-mode) – Agnel Vishal Mar 19 '18 at 11:17

0 Answers0