iphoneでwebページをアプリのように見せたい

iphoneでアプリのようなコンテンツの場合に、少し困った部分があります。

・アドレスのバーが常に出てしまう

・下のツールバー

です。上記のを解決したいと思います。

・アドレスバーが常に出てしまう場合は

function hideAddressBar(){
    $("body,html,#container").css("min-height",window.outerHeight/window.devicePixelRatio);
    scrollTo(0,1)
     setTimeout(function(){
        scrollTo(0,1)
    },400);
};
$(document).ready(function(){ hideAddressBar(); });
$("body").bind("orientationchange", hideAddressBar);

のようなjavascriptを記載します。これは、ページの読み込みが完了した時などにページのサイズとウインドウのサイズを取得して、スクロールをさせる事でアドレスバーを見えなくする事ができます。多くの場合にはscrollToだけで問題ないのですが、ページのコンテンツが少ないのだけど、アプリっぽくしたい場合はmin-heightを設定してあげます。

・アプリのツールバーを消す方法

これは最初にいうと不可能です。ブラウジングをしている場合に、下に表示しているツールバーを消す事ができません。しかし、例外があって、ブックマークをして、ホーム画面にアプリを表示させた場合に、htmlのheadの中に次のmetaタグをいれます。

<meta name="apple-mobile-web-app-capable" content="yes" />

これで、ブックマークをホームから立ち上げた時のみですが、下のツールバーを消した状態で表示させる事ができます。

ぜひ、お試しください!

 

  • written on 2012.11.09
  • category : mobile

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑