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.
[javascript]
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′);
}
[/javascript]
Justin Carmony 
I am impressed by people who are good in Java. I has just begun to work with it.
LikeLike
So, you had in your HTML-File, right? Because otherwise document.getElementById(“viewport”) would fail.
LikeLike
HTML has been deleted on my last post. I ment:
So, you had <meta id=”viewport” …> in your HTML-File, right? Because otherwise document.getElementById(”viewport”) would fail.
LikeLike
correct
LikeLike
I have some code that calls javascript functions similar to the one’s described here. The problem is when someone zooms in on a page, afterwards how can i reset the zoom factor back to the initial-scale with javascript ? The only way that seems to reset back to the initial scale is with a full page refresh…. any ideas ?
LikeLike
Thanks for the tip on content views for Mobile Safari. Keep up the good work
LikeLike
Wow this is a genius solution.
I had been looking all over the internet for this. I dont think alot of people know about this man.
Thanks!
By the way. I added my own id to the viewport element. I could not get it to work otherwise.
meta name=”viewport” id=”view” content=”width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0,maximum-scale=1.0,”
and then I called:
getElementById(“view”) etc.
Thanks again for this.
LikeLike