Iphone and Viewports

Operating System:
Iphone OS

Problem:
Because of some google analytics problems when a user browse a page with an iphone i was required to show a popup telling the user's that there is a app for the website and when you close it to show the old page.

Soution:

<<hide the page>>
$('meta[name="viewport"]').attr('content', 'width = device-width, maximum-scale=1.0;');
/*width = device-width show the smaller popup as fullpage. maximum-scale=1 dosen't allow the  popup to be zoomed in. */
<<Show popup>>
on close popup
<<show the page>>
$('meta[name="viewport"]').attr('content','width='+$(window).width() + ', height=' + $(window).height() + ', initial-scale=0.5;');

/*Set the content width to windows width and height as well. With the initial-scale you can play arrow. That is the value i found works best in my particular case*/

Resources:
https://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html - official apple doc. You can see the description for every value of the viewport there.

What have i learned:

Programming Javascript for Iphone OS and Android is very hard. They are very picky. I very big problem that i have was that after i close the popup the viewport use to leave a dark impression on the page even if it scrolled out. I have no idea how i managed to get ride of that but i finally did. Keep trying to swich around the values until they work.