6

我有一个在 iPad 上的 Safari 上运行的网络应用程序。我正在从 iPad 主页启动应用程序。我希望应用程序以全屏模式启动，并继续以全屏模式运行（即不显示 Safari 地址栏）。因此，我在站点母版页中添加了以下元标记：

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">

我从 iPad 主页启动应用程序，它以全屏模式很好地启动（不显示 Safari 地址栏），但是当我单击站点中的另一个页面时（具有相同的元标记，从相同的继承网站母版页）然后地址栏突然出现在视图中（并保持在视图中）。该链接如下所示（我使用的是 jQueryMobile）：

<a href="/Home" data-ajax="false">Home</a>

在内部页面之间导航时，如何通过隐藏地址栏来强制 Web 应用程序保持看起来像“本机应用程序”？

4

3 回答 3

7

如果您使用外部链接，Mobile Safari 似乎不“本机”支持全屏。一旦您使用 html 锚点，它就会退出全屏模式。window.scrollTo 可能是一种适用于某些人的解决方法，但我也想避免在转换到非全屏模式时 UI 自身翻转的方式。

答案是使用 window.location.assign()。这使全屏应用程序保持在“本机”全屏模式。您只需要将标签重构为 javascript window.location.assign(url) 调用 - 然后将内容保持在全屏状态。

于 2011-06-09T07:59:44.303 回答
5

添加jQuery，您不必修改任何链接，

$(document).ready(function(){
    $('a').click(function(event){
        event.preventDefault();
        window.location.assign($(this).attr('href'));
    });
});

示例链接：

<a href="nextpage.html">Next page without safari</a>
于 2012-02-08T22:32:16.847 回答
2

也许是这样的：来源

// When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});
于 2011-06-09T00:42:06.267 回答