iPhone Web Development: Controlling the viewport via Javascript

Lately I’ve been doing a lot of iPhone web applications. A client wanted to create a portion of their site for the iPhone, and they wanted it to look a very specific way. In order to do this we had to set the view port’s maximum-scale and minimum-scale to 1. This gave them the functionality they desired.

However, one aspect of the web application allowed users to view photos. This caused a problem due to the fact that we had disabled the scale so they were not able to zoom in on photos via pinching.

We solved the problem by before and after loading a picture to be view, we executed a javascript function that changed the value of the viewport.

function allowZoom()
{
document.getElementById("viewport").setAttribute('content','device-width = 320, width = 320, minimum-scale = 1, maximum-scale = 10');
}

function disableZoom()
{
document.getElementById("viewport").setAttribute('content','device-width = 320, width = 320, minimum-scale = 1, maximum-scale = 1');
}