不全屏时如何获取全屏（最小ui）视图的窗口大小？
Posted
技术标签:
【中文标题】不全屏时如何获取全屏（最小ui）视图的窗口大小？【英文标题】：How to get the window size of the fullscreen (minimal-ui) view when not in fullscreen? 【发布时间】：2015-01-04 06:51:57 【问题描述】：不全屏时如何获取全屏（minimal-ui）视图的尺寸？
这是screen 属性报告的内容：
window.screen.height; // 568 (Thats the screen height)
window.screen.availHeight; // 548 (???; Unknown dimension. Note, that is it not reporting the available space as per the spec.)
window.document.documentElement.clientHeight; // 460 (Thats the window size when not in fullscreen.)
在全屏模式下，window.innerHeight 是 529，这是我在进入全屏模式之前尝试得出的数字。
图片说明了我所指的屏幕状态：
在 ios 8 中，它是通过“触摸向下”手势输入的。
【问题讨论】：
window.innerHeight 未全屏时会报告什么？
报告当前视口大小，即460，即。相当于window.document.documentElement.clientHeight。
availHeight是屏幕可以使用的部分，减去的20像素应该是状态行的高度。您的问题是“全屏”并不是真正的全屏 - 地址栏仍然存在，它似乎占据了您缺少的 19 个像素。
这就是availHeight 应该报告的内容。但是，如果您对其进行测试，实际的availHeight 比报告的要大。我编写了一个使用 iOS 规范检查来确定“全屏”尺寸的整个库。 github.com/gajus/scream 该库完成了它的工作，尽管它依赖于硬编码值，这是我想避免的。
在 iphone 6 plus 和 IOS 8.0.2 window.screen.availWidth = window.screen.height = 667 和 window.screen.availHeight = window.screen.width = 375 上进行测试，无论屏幕方向是什么或视图是全屏还是最小。
【参考方案1】：
为了澄清，window.screen.availHeight 反映了浏览器窗口（包括所有工具栏）可以拥有的最大高度。如果你看下图，你会看到 548 只是整个浏览器的高度，没有 iOS 菜单栏。因此，availHeight 属性不应该显示内容的可用空间，而是显示整个浏览器。它用于桌面浏览器，通过检查 window.outerHeight 和 window.screen.availHeight 来检测浏览器是否最大化。
但是关于获得最小的 UI 高度，就在进入它之前。 spec 中没有标准属性，因为它只是 iOS 唯一的行为。苹果本可以放置一些非标准属性来暴露这些信息。但是当我检查了window 和window.screen 对象时，没有什么相关的。这是为了可行性考虑。
作为旁注，通过resize 事件知道新视口大小与提前知道可能的大小有什么区别？在resize 事件之前可以完成的工作量应该总是最少的，如果应该发生布局更改，它应该在调整大小之后发生。所以，提前知道这些数字应该没什么用。
考虑这种情况，用户打开网页并立即开始滚动。如果我们之前知道这些数字，那么对于屏幕的初始渲染我们无能为力，因为它不是最小的 UI。无论应该做什么，都必须在用户开始滚动后立即开始。
现在除此之外，还有一个看起来像最小 ui 的其他调整大小事件。在 iPad 上，当您有多个选项卡时，高度会缩小一点，以显示选项卡。因此，当用户关闭唯一的另一个选项卡时，当前页面会变得更高一些，并且也会触发调整大小事件。但是这个新高度与最小 UI 的高度不同。这表明这个最小的 ui 只是高度的另一个提升，而不是类似于 Fullscreen-API 的模式。
因此，如果页面依赖于高度，那么需要记住的可能更改太多了。硬编码只是一种短期解决方案，有一天您将无法测试所有这些设备。
但是，我也应该说，resize 事件有一个缺点，它在进入最小 ui 后触发，这可能为时已晚。所以，当身高开始增长时，没有任何事情可以知道。这就是我认为一些自定义流体 UI 可能需要启动动画来更改大小的地方。在这种情况下，要知道这个事件的开始，可以使用间隔检查innerHeight，它会立即开始改变。
无论如何，如果有必要的用例来预先知道任何滚动的数字，我相信它还不能通过 CSSOM 获得。
编辑：
检测最小用户界面是另一回事，仍然不需要知道尺寸。使用 Touch 事件，您可以检测视图是否已进入最小 UI。
检查touchstart、touchmove 和touchend 事件中的innerHeight 有助于检测最小的用户界面。天真的方法是在触摸结束时检查 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 Display Size and Web Design Tips Kyle Larson 的文章。【讨论】：
测试window.screen.availHeight 变量。您将看到它没有返回您引用的任何值。正如我在 cmets 中提到的，这些尺寸可以使用比例 (github.com/gajus/scream) 得出。这种方法的问题在于它依赖于设备检查和硬编码值。最后，window.screen.availHeight 的 iOS 实现存在缺陷。因此，无论解决方案是什么，都不能依赖这个变量。
是的，我在 iOS8 上检查了window.screen.availHeight。我在 iPad2 上检查过，它给出了 748 像素，即 768 像素的屏幕高度减去 20 像素的菜单栏。它没有考虑方向。无论如何，没错，availHeight 根本不是解决方案。
这将解释为什么我需要在用户输入最小用户界面之前计算这些尺寸，***.com/a/26884561/368691
我明白了，这是一个有趣的用例。但我可以再说一遍，不需要知道尺寸。您可以查看我的新编辑以了解原因。
脚本不能依赖 innerHeight/innerWidth 属性，因为这些（正如您自己说明的那样）是动态属性。如果使用这些变量以最小视图或完整视图加载页面，则无法（使用比较方法）扣除页面，因为您没有固定的偏移量。赏金的描述中强调了这一点的重要性。以上是关于不全屏时如何获取全屏（最小ui）视图的窗口大小？的主要内容，如果未能解决你的问题，请参考以下文章