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');
}
Related Posts
- ASP .NET 2.0, GridViews, HyperLinkField, and JavaScript I’ve found some interesting notes on ASP .NET’s GridView, it’s limitations and work arounds. For work I was looking for a way to execute JavaScript from clicking a link on a GridView Cell. An example would be to having a list of transactions and wanting to click a link to...
- iPhone and WordPress I am now testing my new plugins for my iPhone for wordpress. So far they seem pretty good. I got two plugins: one for visitors and another for an admin panel. I’ll write the rest from my computer… There we go. Don’t get me wrong, I love the iPhone keyboard,...
- iPhone SDK release on March 6th? According to Information Week the iPhone SDK will be released March 6th. It seems a full blown event is happening, so I doubt we’ll have to worry about it being pushed back. However from their news post it seems applications have to be approved. Will there be a way to...
- iPhone & Vista 64-Bit…. Finally! Here is the good news finally: iPhone Supports Vista 64-Bit. It’s about time, its only taken 6+ months to get a version of iTunes that works with Vista 64-Bit. I will say that Apple seemed to be the slowest people to adapt to 64-Bit for Windows. And for every apple...
[...] 325bimmerdan wrote an interesting post today onHere’s a quick excerptThis 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 … [...]
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.