如何在全屏模式下获取全屏（minimal-ui）视图的窗口大小？

时间：2014-11-07 13:06:27

标签： javascript ios mobile-safari

如何在全屏模式下获取全屏（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，这是我在进入全屏模式之前尝试获取的数字。

图像说明了我所指的屏幕状态：

in fullscreen

在iOS 8中，输入＆＃34;触摸 - 向下拖动＆＃34;手势。

1 个答案:

答案 0 :(得分：0)

为了澄清，window.screen.availHeight反映了浏览器窗口（包括所有工具栏）可以具有的最大高度。如果你看下面的图片，你会看到548只是整个浏览器的高度，没有iOS菜单栏。因此，availHeight属性不应显示内容的可用空间，而应显示整个浏览器。它用于桌面浏览器，通过window.outerHeight对window.screen.availHeight进行检查来检测浏览器是否最大化等内容。

iPhone Dimensions

但是要在进入它之前获得最小的UI高度。 spec中没有标准属性，因为它只是iOS的行为。 Apple可能会放置一些非标准属性来公开这些信息。但是，由于我检查了window和window.screen个对象，因此无关紧要。这就是可行性，现在。

作为旁注，了解新视口大小与resize事件之间的区别和提前知道可能的大小有什么区别？在resize事件之前可以完成的工作量应始终保持最小，如果布局发生更改，则应在调整大小后进行。所以，提前知道这些数字，不应该有那么大的帮助。

考虑这种情况，即用户打开网页并立即开始滚动。如果我们之前知道数字，那么我们无法为屏幕的初始渲染做任何事情，因为它不是最小的UI。无论应该做什么，必须在用户开始滚动后立即开始。

除此之外，还有另一个看起来像最小ui的resize事件。在iPad上，当您有多个标签时，高度会略微缩小，以显示标签。因此，当用户关闭唯一的其他选项卡时，当前页面会变得更高，并且也会触发调整大小事件。但是这个新高度与最小UI的高度不同。这表明这个最小的ui只是高度的另一个提升，而不是类似Fullscreen-API的模式。

因此，如果页面取决于高度，那么可能需要考虑太多可能的更改。硬编码只是一个短期解决方案，有一天你无法测试所有这些设备。

但是，我也应该说调整大小事件有一个缺点，它在进入最小的ui之后触发，这可能为时已晚。因此，当高度开始增长时，没有任何事情可以了解它。我相信一些自定义流体UI可能需要启动动画来改变大小。在这种情况下，要了解此事件的开始，可以使用innerHeight上的间隔检查，它将立即开始更改。

无论如何，如果有必要的用例来预先知道数字的任何滚动，我相信它还没有通过CSSOM提供。

修改

检测minimal-ui是另一回事，仍然不需要知道尺寸。使用Touch事件，您可以检测视图是否已进入最小UI。

检查touchstart，touchmove和touchend事件中的innerHeight可以帮助检测最小的ui。天真的方法是检查触摸结束时内部高度是否增加。这适用于大多数情况，但它有一个问题，如果用户在最小ui转换的中间停止接触，我们无法确定我们是否将进入最小UI。按touchmove检查上次报告的高度有助于检查我们是否会恢复默认视图。

无论如何，您可以查看下面的代码，看看它是如何工作的。它有bug并且可以改进，但你会得到这个想法。我没有把它放在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>

参考文献：

相关问题
最新问题