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,...
- 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...
8 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 ?
Thanks for the tip on content views for Mobile Safari. Keep up the good work
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.
Continuing the Discussion