How do you get the viewport scale after pinch/zoom on an iPhone web app?

Question

Does anyone know how to get the size in pixels or scale value of the viewport after a user has pinched or double tapped to zoom in/out on a page in JavaScript?

I've tried using window.innerWidth but I've had mixed results. Sometimes it seems to accurately give the number of pixels the viewport is showing, however, if I zoom way in on a page and then do a large pinch to zoom back out, window.innerWidth will be around 600-700 even though it is only showing ~200px of the page. The page is only 400px wide and it didn't show the checkered "you've gone too far" background you see when you zoom out beyond the page size.

If I do small pinches to zoom in and out, window.innerWidth appears to work just fine. Unfortunately I can't rely on a user only making small pinch gestures :)

I've also tried to use the scale property on the gesture event object, but I've found that unreliable because you don't always know the initial scale when you reload the page or use back/forward buttons to navigate to it even when using the meta tag to specify it.

Ultimately, I'm trying to make an app that is aware of when a user is trying to zoom out beyond the maximum zoom level so if there is another way to do this I'm interested in hearing about it :)

Here's the code I'm using to get the innerWidth:

document.body.addEventListener('gestureend', function (evt) {
    console.log(window.innerWidth); // inaccurate when doing large pinch gestures
}, false);

Thanks!

Answer 1

If you're only trying to limit the maximum zoom level, you can use a Safari-specific viewport control tag:

<meta name="viewport" content="maximum-scale=2.0">

See the Safari mobile specific viewport meta tag spec for details.