6

iPad の Safari で Web アプリを実行しています。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 に答える