| Model | Runtime | System Bar | Call bar | Width | Height |
|---|---|---|---|---|---|
| iPhone Retina 4" | Native/phonegap | transparent | hidden | 320 | 568 |
| iPhone Retina 4" | Native/phonegap | black/def | hidden | 320 | 548 |
| iPhone Retina 4" | Native/phonegap | transparent | visible | 320 | 568 2 |
| iPhone Retina 4" | Native/phonegap | black/def | visible | 320 | 528 |
| iPhone Retina 4" | Safari | n/a | hidden | 320 | 444 |
| iPhone Retina 4" | Safari | n/a | visible | 320 | 444 1 |
- Overflow.
- The whole top bar becomes opaque and the app shrinks.
<html doctype="HTML">
<head>
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
</style>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
</head>
<body>
<script>
console.log(document.body.offsetWidth);
console.log(document.body.offsetHeight);
</script>
</body>
</html>