如何以跨浏览器和跨平台的方式获得窗口的有效高度？

I need a method to get the effective height of the browser window. By saying effective, I mean the area which the user actually can see.

我需要一种方法来获得浏览器窗口的有效高度。说有效,我指的是用户实际可以看到的区域。

So for example it should take into count that most mobile browsers place a "floating" navigation bar and/or a "floating" bottom button bar on the browser window, which for example can mess up $(window).height(), as it will show the total height, excluding these bars.

因此,例如,大多数移动浏览器在浏览器窗口上放置一个“浮动”导航栏和/或“浮动”底部按钮栏,这应该可以计算,例如,这可能会弄乱$(window).height(),如它将显示总高度,不包括这些条形。

My scenario is the following: I need a "full-screen" dialog window which has a header, a footer and a body part between them. In case when the dialog body contains longer content, I would like the dialog body to scroll (instead of the whole document), and the header/footer to stay in the effective viewport, so that for example buttons in the footer would be always visible.

我的场景如下:我需要一个“全屏”对话窗口,它有一个页眉,一个页脚和它们之间的正文部分。如果对话框主体包含更长的内容,我希望对话框主体滚动(而不是整个文档),并且页眉/页脚保留在有效视口中,以便例如页脚中的按钮始终可见。

So far I haven't found a good solution to this. I've tried to tweak the Bootstrap Modal and all I could reach is a scrollable modal-body. It works great on desktop, but when I calculate the max-height of the modal-body from window height, I meet the issue on mobile browsers because the top (and/or bottom) bars will break the layout, and footer buttons slide under the bottom bar, or out of the viewport.

到目前为止,我还没有找到一个很好的解决方案。我试图调整Bootstrap模态,我所能达到的只是一个可滚动的模态体。它在桌面上工作得很好,但是当我从窗口高度计算模态体的最大高度时,我在移动浏览器上遇到问题,因为顶部(和/或底部)条将打破布局,页脚按钮在下滑动底栏,或视口外。

1 个解决方案

#1

Based on Gary Hayes's comment, I've managed to put together a solution for targetting specifically the small screen devices (using bootstrap). I gave up the requirement to keep the dialog small when content is small, still much more promising.

根据Gary Hayes的评论,我已经设法制定了一个专门针对小屏幕设备(使用bootstrap)的解决方案。当内容很小时,我放弃了保持对话框小的要求,仍然更有希望。

Tested it only in emulators until now, but hopefully it's gonna work on real devices too, and the big advantage is that it doesn't need the window height in any way.

直到现在才在模拟器中对它进行测试,但希望它也可以在真实设备上运行,并且最大的优点是它不需要任何方式的窗口高度。

I've implemented it in LESS like this:

我已经在LESS中实现了这样:

@media (max-width: @screen-sm-max) {
    .modal {
        padding-right: 0 !important;
        position: fixed;

        .modal-dialog, .modal-content {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .modal-content {
            .modal-header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
            }
            .modal-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
            }
            .modal-body {
                position: fixed;
                left: 0;
                right: 0;
                top: 60px; // height of header, calculated precisely in JS on shown.bs.modal handler
                bottom: 60px; // height of footer, calculated precisely in JS on shown.bs.modal handler
            }
        }
    }
}

#1