iOS Safari correct viewport size

In our html5 application on iOS, in particular when running as a home screen icon, there was an annoying extra 20px of space at the bottom of the window that allowed the content to be scrolled up underneath the status bar. For a long time I could not figure out what was causing this and simply ignored it.

On re-visiting this issue today, I tracked it down the the viewport meta tag setting height = device-height. I tried removing this and letting it work it out for itself but that made matters worse (even more space).

In the end, I came up with the following code to specify a specific height based on the device height less 20 pixels for the status bar:

<meta id="viewport" name="viewport" content="width=device-width, height=device-height">
(function() {
    var iOS = !!navigator.platform.match(/(iPad|iPhone|iPod)/g);
    if (iOS) {
        var viewport = document.getElementById("viewport"),
            content = viewport.getAttribute("content").split(/[ ]*,[ ]*/);
        for (var i = 0; i < content.length; i++) {
            var nv = content[i].split(/[ ]*=[ ]*/);
            if (nv[0] === "height" && nv[1] === "device-height") {
                nv[1] = window.innerHeight - 20;
                content[i] = nv.join("=");
                break;
            }
        }
        viewport.setAttribute("content", content.join(","));
    }
})();
Advertisements

About austinfrance

Technical Developer @ RedSky IT / Explorer Software
This entry was posted in Uncategorized. Bookmark the permalink.

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