WEB制作(html・css(スタイルシート))に関する各種メモ書き

スマホサイトをフルスクリーンにしてWEBアプリぽく見せる

HTMLページに以下の2行を追加してページをiPhoneで開き、【ホーム画面に追加】でホームにアイコンを作成すると フルスクリーン表示で起動することができます。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

設定できる値は以下のとおり

apple-mobile-web-app-capable : フルスクリーンにするかどうか?
【yes】フルスクリーンにする
【no】フルスクリーンにしない

apple-mobile-web-app-status-bar-style : (画面一番上のステータスバーの表示方法)
【default】標準
【black】反転(黒バック)
【black-translucent】(透明)

ただしページ内リンク以外のリンクがあるとSafariが別で立ち上がるので、jQuery-uiなどを使ってリンクを組み立てるか 次の「jquery_mobile_js_link.js」を使ってリンクを押すとjavascriptで画面遷移するように変更する必要があります。

リンクを全てJavaScriptのリンクに変更する(jquery_mobile_js_link.js)

使い方

<script src="jquery_mobile_js_link.js"></script>

jquery_mobile_js_link.js

// Initialization
jQuery.mobile_js_link = {
    init: function() {
        for (module in jQuery.mobile_js_link) {
            if (jQuery.mobile_js_link[module].init)
                jQuery.mobile_js_link[module].init();
        }
    }
};
jQuery(document).ready(jQuery.mobile_js_link.init);
jQuery.mobile_js_link.rewrite = {
    init: function() {
        var ua = navigator.userAgent;
        if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){}
            else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){}
            else{
            return;
        }
        var all_tags = $('a');
        all_tags.each(function(){
            var url = $(this).attr('href');
            $(this).attr('href','#');
            $(this).click(function(){
                location.href = url;
            });
        });
    }
};

関連エントリー

No.998
01/20 15:12

edit

携帯スマホサイト