Apple iPhone web page – change scale using Javascript

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.

This entry was posted in Javascript, Mobile, Tutorial and tagged , , , , . Bookmark the permalink.

4 Responses to Apple iPhone web page – change scale using Javascript

  1. mohit says:

    dsab aesssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

  2. Sopian Edy says:

    Get $100/day
    inbox me…..

Leave a 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s