IPhone 4 web-app browser width: 960 or 981

iphone-4web-applicationswidth

<html>
    <body REMonload="document.location.assign('index2.php?w=' + window.innerWidth + '&h=' + window.innerHeight);">
    <script language="javascript">
    document.write('w=' + window.innerWidth + '&h=' + window.innerHeight);
    </script>
    </body>
</html>

Output:

w=981&h=425

Why? Wikipedia says, w should be 960.

Regards,

UPDATE

I've found out, the problem was related to viewport meta tag.

The following code does what I want to see:

<html style="width:100%; height:100%;">
<head>
<meta name="viewport" content="width=device-width; initial-scale=0.5; minimum-scale=0.5; maximum-scale=0.5; user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
    <body style="width:100%; height:100%; background-color: blue;"
    REMonload="document.location.assign('index2.php?w=' + window.innerWidth + '&h=' + window.innerHeight);"
    onload="alert('w=' + window.innerWidth + '&h=' + window.innerHeight);">
    </body>
</html>

Look at this meta:

name="viewport" content="width=device-width; initial-scale=0.5; minimum-scale=0.5; maximum-scale=0.5; user-scalable=no;"

I don't understand, how does it work. I've tried coefficient 1.0 for device-width (I suppose it's 960), but it seems like 0.5 is what I need.

Anyway, it works for my iPod Touch 4 (960*640).

Could you please try the code on iPad or iPad2 and iPhone/iPod Touch 1 or 2 or 3? Is it 1024/768 and 480/320 correspondingly? In other words, can I use the same solution for any Apple device?

Thanks in advance!

Best Answer

iPhone 3GS:
1. Landscape: w=960 h=416
2. Portrait: w=640 h=712

iPhone 4:
1. Landscape: w=960 h=416
2. Portrait: w=640 h=712

iPad 1
1. Landscape: w=2048 h=1344
2. Portrait: w=1536 h=1856

iPad 2
1. Landscape: w=2048 h=1344
2. Portrait: w=1536 h=1856

edit: added 3GS data
edit2: added ipad2 data

Looking at your results together with mine, I'd say the later iPhones and iPod touch seem the same, and both iPads are also similar to each other.

Related Topic