Question

iOS 8 removed "minimal-ui" viewport property支持。如何检测浏览器是否为iOS Safari，是否支持“minimal-ui”？

在视口中添加“minimal-ui”不会导致错误，从而使特征检测更加困难。

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

我想避免版本检测：

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) { /* [..] */ }

因为不知道“minimal-ui”的未来是什么。

我发现唯一可靠的解决方案是添加“minimal-ui”。然后在页面加载检查window.innerHeight。如果它大于周围镀铬的高度，则支持“minimal-ui”。这将起作用，因为即使页面以“软”全屏模式显示（当用户触摸拖动页面以进入无铬视图时），window.innerHeight也不会反映“软”全屏高度，直到之后隐式滚动/调整大小事件，例如

假设iOS 8，iPhone 5s和页面以“软”全屏加载：

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

如何检测最小ui支持？

0 个答案: