为了澄清，window.screen.availHeight反映浏览器窗口（包括所有工具栏）可以具有的最大高度。如果你看下图，你会发现548只是整个浏览器的高度，没有iOS菜单栏。所以availHeight属性不应显示内容的可用空间，而是显示整个浏览器。它用于桌面浏览器，通过检查来检测浏览器是否最大化等情况window.outerHeight反对window.screen.availHeight.
但在开始讨论之前，先要获得最小的 UI 高度。没有标准属性spec http://www.w3.org/TR/cssom-view/对于它，因为这只是 iOS 独有的行为。 Apple 可以设置一些非标准属性来公开这些信息。但正如我检查过的window and window.screen对象，没有任何关联。目前这是为了可行性。
作为旁注，知道新视口大小与resize事件并提前知道可能的大小？在此之前可以完成的工作量resize事件，应该始终是最小的，如果发生布局更改，则应该在调整大小之后发生。因此，提前知道这些数字应该没有多大帮助。
考虑这样的场景：用户打开网页，并立即开始滚动。如果我们之前知道这些数字，那么对于屏幕的初始渲染我们无能为力，因为它不是一个最小的 UI。无论应该做什么，都必须在用户开始滚动后立即开始。
现在除此之外，还有另一个看起来像最小用户界面的调整大小事件。在 iPad 上，当您有多个选项卡时，高度会稍微缩小一点以显示选项卡。因此，当用户关闭唯一的其他选项卡时，当前页面会变得更高一点，并也会触发调整大小事件。但这个新的高度与最小UI的高度不同。这表明这个最小的 ui 只是高度的另一个提升，而不是类似全屏 API 的模式。
因此，如果页面依赖于高度，则需要记住太多可能的更改。硬编码只是一种短期解决方案，有一天您将无法测试所有这些设备。
但是，我还应该说，调整大小事件有一个缺点，它在进入最小用户界面后触发，这可能为时已晚。所以，当身高开始增长时，没有任何事件可以知道。这就是我认为一些自定义流体用户界面可能需要启动动画来更改大小的地方。在这种情况下，要了解此事件的开始，可以对innerHeight 使用间隔检查，innerHeight 将立即开始更改。
不管怎样，如果有一个必要的用例需要在任何滚动之前了解数字，我相信它还不能通过 CSSOM 获得。
Edit:
检测最小用户界面是另一回事，仍然不需要知道尺寸。使用 Touch 事件，您可以检测视图是否已进入最小 UI。
检查innerHeighttouchstart, touchmove and touchend事件可以帮助检测最小的用户界面。简单的方法是检查触摸结束时innerHeight 是否增加。这适用于大多数情况，但有一个问题，如果用户在最小 UI 转换中间停止触摸，我们无法确定是否会进入最小 UI。检查最后报告的高度touchmove可以帮助检查我们是否会恢复到默认视图。
无论如何，您可以检查下面的代码以了解它是如何工作的。它有缺陷并且可以改进，但你会明白的。我没有把它放在 codepen 上，因为你无法在那里滚动整个页面。
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
<style>
div {
position: fixed;
left: 10px;
}
#dd1 {
top: 10px;
}
#dd2 {
top:30px;
}
#dd3 {
top: 50px;
}
</style>
<body>
<div id="dd1">Start: <span id="d1"></span></div>
<div id="dd2">Move: <span id="d2"></span></div>
<div id="dd3">End: <span id="d3"></span></div>
<section style="position:relative;height:3000px;"></section>
<script>
var d1 = document.querySelector("#d1");
var d2 = document.querySelector("#d2");
var d3 = document.querySelector("#d3");
var start_height=window.innerHeight;
var cur_height;
var end_height;
var normal_state=true;
var entered_minimal_ui=false;
//window.addEventListener("touchstart", start_handler, false);
window.addEventListener("touchmove", move_handler, false);
window.addEventListener("touchend", end_handler, false);
document.ontouchstart = control_touching;
d1.textContent=start_height;
function move_handler() {
if(cur_height>start_height) {
// we *may* enter the minimal-ui, but it's not final yet
d2.textContent="I detected minimal-ui faster. (Current: "+cur_height+")";
normal_state=false;
}
cur_height=window.innerHeight;
}
function end_handler() {
end_height=window.innerHeight;
if(end_height>start_height && end_height>=cur_height) {
d3.textContent="Hello minimal-ui. (End: "+end_height+")";
normal_state=false;
entered_minimal_ui=true;
}
else if(!entered_minimal_ui) {
d3.textContent="We didn't enter minimal-ui. Reverting.";
normal_state=true;
}
}
function control_touching() {
document.ontouchstart = function(e){
if(normal_state) {
return true;
}
else // just for testing
e.preventDefault();
}
}
</script>
</body>
</html>
参考：
- 插图来自iPhone 5 显示屏尺寸和网页设计技巧 http://www.kylejlarson.com/blog/2012/iphone-5-web-design/凯尔·拉森的文章。
操作？
