Adding pinch-zoomable div image to a non-scalable viewport on mobile devices

Question

Consider the following viewport meta tag:

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

The content on the page is non-scalable and mobile responsive. Sometimes, I need to overlay a large image on top of it, and allow the user to pinch-zoom that image.

#overlay_div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #dddddd;
    z-index: 550000;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

<div id="overlay_div">
    <img src="largeimage.jpg" width="100%">
</div>

Currently, I am aware of two possible options:

1. Programmatically change the viewport meta to allow user scaling (possible cross-browser implications, also causes content underneath to scale which is not desirable)
2. Use hammer.js to manually handle the pinch event and scale the div/image accordingly (seems very complex possible compatibility implications).

Does anyone know the proper way to do this, especially for cross-browser compatibility? I am hoping there may be a simple CSS solution.

Thanks

Answer 1

I'm not sure it's your case but usually I prefer to make image a link (a) to original image. Mobile browsers can handle this situation opening image in full screen mode. Then user can do whatever he wants with the image or can go back to main page.