GWT：隐藏移动设备上的地址栏

【问题标题】：GWT: Hide address bar on mobile devicesGWT：隐藏移动设备上的地址栏
【发布时间】：2013-06-13 15:14:48
【问题描述】：

我试图在移动设备上隐藏我的 GWT 应用程序的地址栏。从我的移动代码中，我调用了下面的 JSNI 函数，但它不起作用。您能想到的任何不涉及 JQuery 的解决方案？

public static native void hideBar()
/*-{
    $($doc).ready(function() {
        function hideAddressBar() {
            if($doc.documentElement.scrollHeight < $wnd.outerHeight / $wnd.devicePixelRatio) {
               $doc.documentElement.style.height = ($wnd.outerHeight / $wnd.devicePixelRatio) + "px";
            }
        }

        $wnd.addEventListener("load", function() { hideAddressBar(); });
        $wnd.addEventListener("orientationchange", function() { hideAddressBar(); });
    });
}-*/;

【问题讨论】：

标签： javascript gwt jsni navigationbar address-bar

【解决方案1】：

为什么不将您的应用改为fullscreen？

您必须考虑不同的实现（webkit 与 gecko 前缀、方法命名与 W3C 标准不同等），但这似乎是您的情况。

而不是hideAddressBar()，有一个goFullScreen()，粗鲁地这样做：

function goFullScreen() {
    var docElm = $doc.documentElement;
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
}

请参阅 MDN 上的 Using Fullscreen Mode，以及 hacks.mozilla.org 上的 Using the fullscreen API in web browsers。

还可以查看来自 robnyman 的this useful gist，以便快速入门。

【讨论】：