How to detect the minimal-ui support?

Question

iOS 8 removed "minimal-ui" viewport property support. How to detect if browser is iOS Safari and if it supports "minimal-ui"?

Adding "minimal-ui" to the viewport does not cause an error, making feature detection harder.

var meta = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'minimal-ui');
document.head.appendChild(meta);
// No error.

I'd like to avoid version detection:

var version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
version = [parseInt(version[1], 10), parseInt(version[2], 10), parseInt(version[3] || 0, 10)];

if (version[0] > 8) { /* [..] */ }

Because it is unknown what is the future of "minimal-ui".

The only reliable solution that I have found is adding "minimal-ui". Then on page load checking the window.innerHeight. If it is greater than the height with the chrome around, "minimal-ui" is supported. This will work, because even if page is displayed in "soft" full screen mode (when user touch-drag the page to enter the no-chrome view), window.innerHeight does not reflect the "soft" fullscreen height until after the implicit scroll/resize event, e.g.

Assuming iOS 8, iPhone 5s and page loaded in "soft" full screen:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimal-ui">
</head>
<body style="height: 1000px;"> <!-- Document height must be greater than the viewport to enter the soft fullscreen. -->
    <script>
    if (window.innerHeight == 460) {
        // We know that minimal-ui is not supported because initial
        // window hight is that of browser window with the chrome.
    }


    // This event is called instantly after page load.
    window.addEventListener('resize', function () {
        window.innerHeight; // 529
    });
    </script>
</body>
</html>

How to detect the minimal-ui support?

0 Answers0