<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!
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.