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');
-
}
Related Posts
- My iPhone Has Hindered My Email What!? What is this that I speak of? My very favorite feature of the iPhone has actually hindered it?! How can this be? Its really straight forward actually. Before my iPhone, when I checked my email I was at a computer and typically would respond to emails immediately. Now, however,...
- Steamlined Web Development Presentation Video Alright, it looks like the Victor at UPHPU has gotten my presentation up on Steamlining your web development. Since it was the first night Victor had tried to capture video & audio to mesh them together, the video on the presentation is a little bit further ahead than the audio. ...
- jQuery Tip: Better Toggle For many web developers, jQuery is the most awesome JavaScript library out there. For me, it has turned JavaScript from being a nightmare into a power tool. I love JavaScript now, where as before I truely hated it. Takes all the hassel out of most compatibility issues across browsers. I...
6 Responses
Comments RSS Feed.
I am impressed by people who are good in Java. I has just begun to work with it.
So, you had in your HTML-File, right? Because otherwise document.getElementById(”viewport”) would fail.
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.
correct
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 ?
Continuing the Discussion