How do you get the viewport scale after zooming in / out on the iPhone web application?

Question

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

I tried using window.innerWidth, but I had mixed results. Sometimes it seems that the exact number of pixels is displayed in the viewport, however, if I zoom in on the page and then make a big click to zoom in, window.innerWidth will be around 600-700, although this only shows ~ 200px pages. This page is only 400 pixels wide and doesn’t show that you’ve chosen "you went too far" when you zoom out beyond the page size.

If I make small clicks to zoom in or out, window.innerWidth seems to work fine. Unfortunately, I cannot rely on a user making only small pinch gestures :)

I also tried using the scale property in the gesture event object, but I found it to be unreliable because you don’t always know the start scale when you reload the page or use the back / forward buttons to jump to that even when using the meta tag to indicate it.

Ultimately, I'm trying to create an application that knows about when the user is trying to zoom out beyond the maximum zoom level, so if there is another way to do this, I am interested to know about it :)

Here is the code that I use to get innerWidth:

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

Thanks!

Answer 1

If you are only trying to limit the maximum zoom level, you can use the widget control tag specific to Safari:

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

For more information, see the Safari viewport view meta tag for mobile devices.