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.

[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]

8 thoughts on “iPhone Web Development: Controlling the viewport via Javascript

  1. I am impressed by people who are good in Java. I has just begun to work with it.

    Like

  2. So, you had in your HTML-File, right? Because otherwise document.getElementById(“viewport”) would fail.

    Like

  3. 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.

    Like

  4. Brian Duchesneau July 2, 2009 — 2:07 pm

    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 ?

    Like

  5. Thanks for the tip on content views for Mobile Safari. Keep up the good work

    Like

  6. 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.

    Like

Leave a Reply to iPhoneConnection Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close