The Problem
I had a chance to develop a HTML5 animated web page targeted with Apple iPhone. The width of the page is 640px (iPhone4 screen size is 640px). We can set the scale and user scalable using meta tag with name viewport. But I had to set different scale for iPhone4 and iPhone3 (width 320px).
Meta – Viewport – in mobile web pages
We can set the scale using meta – viewport. The following code is suitable for iphone4, scale = 1, hence the web page width is 640px. If we set user-scalable=1, then the user can zoom in/out upto min-max scales.
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
But for iphone3, I need scale as 0.5, so that the page will not be shown bigger. So I used the following javascipt…
Change Scale using Javascript
Check the screen size, if it is 320px, then change the meta – viewport content value.
if(screen.width == 320 && screen.height == 480) { document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=0.5; maximum-scale=0.5; user-scalable=0;"); } //OR if(screen.width != 640) { newScale = (screen.width/640); document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=" + newScale + "; maximum-scale=" + newScale + "; user-scalable=0;"); }
So, my first few lines will be…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> <script> if(screen.width == 320 && screen.height == 480) { document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=0.5; maximum-scale=0.5; user-scalable=0;"); } </script>
This works for iPhone, but need to test with some other mobiles with various resolutions.
dsab aesssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
nice
see my site
http://www.centplay.com/affiliate/id_878/
Get $100/day
inbox me…..