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>