如何在全屏模式下获取全屏（minimal-ui）视图的窗口大小？ [英] How to get the window size of the fullscreen (minimal-ui) view when not in fullscreen?

问题描述

如何在全屏模式下获取全屏（minimal-ui）视图的尺寸？

How to get the dimensions of the fullscreen (minimal-ui) view when not in fullscreen?

这就是屏幕属性报告：

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

When in fullscreen, the window.innerHeight is 529, which is the number I am trying to derive prior to entering the fullscreen mode.

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

Image illustrates the state of the screen I am referring to:

在iOS 8中，通过触摸 - 向下拖动手势输入。

In iOS 8, it is entered with a "touch-drag down" gesture.

推荐答案

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

To clarify, the window.screen.availHeight reflects the maximum height the browser window, including all the toolbars, can have. If you look at the picture below, you see that 548 is just the height of the whole browser, without the iOS menubar. So, the availHeight property is not supposed to show the available space for the content, but the whole browser. It's used for desktop browsers, to detect things like the browser is maximized or not, by checking window.outerHeight against window.screen.availHeight.

但是关于获得最小的UI高度，就在进入它之前。 规范中没有标准属性，因为它只是iOS的行为。 Apple可能会放置一些非标准属性来公开这些信息。但是，当我检查窗口和 window.screen 对象时，没有任何相关内容。这就是目前的可行性。

But about getting the minimal UI height, right before getting into it. There's no standard property in the spec for it, as it's just a iOS only behavior. Apple could have put some non-standard properties to expose these information. But as I have checked the window and window.screen objects, there's nothing related. That's for the feasiblity, for now.

作为旁注，知道新视口大小与 resize 事件并提前知道可能的大小？在 resize 事件之前可以完成的工作量应始终保持最小，如果布局发生更改，则应在调整大小后进行。因此，事先知道数字，不应该帮助那么多。

As a sidenote, what is the difference between knowing the new viewport size with resize event and knowing the would-be size in advance? The amount of work that can be done, prior to the resize event, should always be minimal, and if a layout change should happen, it should happen after the resize. So, knowing the numbers in advance, shouldn't help that much.

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

Consider this scenario that a user opens a webpage, and starts scrolling immediately. If we know the numbers before, there's nothing that we can do for the initial render of the screen, as it's not a minimal UI. Whatever that should be done, must begin rightaway after the user starts scrolling.

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

Now besides this, there's one other resize event that just looks like the minimal ui. On the iPad, when you have more than one tab, the height shrinks a bit more, to show the tabs. So, when the user closes the only other tab, the current page, gets a bit taller, and triggers a resize event too. But this new height is different from the height of the minimal UI. This suggests that this minimal ui, is just another boost in the height, not a Fullscreen-API-like mode.

因此，如果页面取决于高度，要记住太多可能的变化。硬编码只是一个短期解决方案，有一天你将无法测试所有这些设备。

So, if a page is dependent on the height, there's just too many possible changes to bear in mind. Hard-coding would be just a short-term solution, one day you won't be able to test all those devices.

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

But, I also should say that there's a downside to the resize event, it triggers after getting into the minimal ui, which may be too late. So, when the height starts to grow, there's no event to know about it. That's where I believe some custom fluid UIs may need to start an animation to change the sizes. In this case, to know about the beginning of this event, one may use an interval checking on the innerHeight, which will start to change immediately.

无论如何，如果有这是预先知道数字滚动的必要用例，我相信它不能通过CSSOM获得。

Anyway, if there is a necessary usecase for knowing the numbers beforehand any scrolling, I believe it's not available through the CSSOM, yet.

编辑：

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

Detecting minimal-ui is another thing, that still knowing the dimensions is not needed. Using Touch events, you can detect if the view has entered the minimal UI or not.

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

Checking the innerHeight in touchstart, touchmove and touchend events can help to detect the minimal ui. The naive approach is to check if at the end of the touch the innerHeight has increased or not. This will work for most of the cases, but it has a problem, if the user stops touching right in the middle of minimal-ui transition, we cannot be sure if we will enter the minimal UI. Checking against the last reported height by touchmove can help to check if we will revert to the default view.

无论如何，您可以查看下面的代码，看看它是如何工作的。它有bug并且可以改进，但你会明白。我没有把它放在codepen上，因为你无法在那里滚动整个页面。

Anyway, You may check the code below to see how it works. It has bugs and can be improved, but you'll get the idea. I didn't put it on codepen, as you couldn't scroll the entire page there.

<!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显示尺寸和网页设计提示 Kyle Larson的文章。

• Illustration is from iPhone 5 Display Size and Web Design Tips article by Kyle Larson.

这篇关于如何在全屏模式下获取全屏（minimal-ui）视图的窗口大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！