我們做好了一個web的應用程式，有時候演示，需要在手機瀏覽器中操作，每次都需要開啟手機瀏覽器，然後找到地址進行訪問，這不算什麼，最討厭的就是還有手機瀏覽器自帶的工具欄等，看著不舒服。

ios系統的safari有個功能：新增到主螢幕，就會在系統桌面建立一個程式圖示，這樣每次只要點選圖示就能開啟系統，也能做到如app系統那樣全屏顯示、操作。

但是有個問題，主頁是可以全屏顯示，點選子連結就會跳轉到safari瀏覽器中，並沒有在當前頁面操作，如何解決呢？

看如下程式碼，在html頭部新增：

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 

apple-mobile-web-app-capable

設定Web應用是否以全屏模式執行。

語法：

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

說明：

如果content設定為yes，Web應用會以全屏模式執行，反之，則不會。content的預設值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。

apple-mobile-web-app-status-bar-style

設定Web App的狀態列（螢幕頂部欄）的樣式

語法：

<meta name="apple-mobile-web-app-status-bar-style" content="blank">

說明：

除非你先使用apple-mobile-web-app-capable指定全屏模式，否則這個meta標籤不會起任何作用。

如果content設定為default，則狀態列正常顯示。如果設定為blank，則狀態列會有一個黑色的背景。如果設定為blank-translucent，則狀態列顯示為黑色半透明。如果設定為default或blank，則頁面顯示在狀態列的下方，即狀態列佔據上方部分，頁面佔據下方部分，二者沒有遮擋對方或被遮擋。如果設定為blank-translucent，則頁面會充滿螢幕，其中頁面頂部會被狀態列遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina螢幕為40px）。預設值是default。

新增如下指令碼：

<script>
if(('standalone' in window.navigator)&&window.navigator.standalone){
        var noddy,remotes=false;
        document.addEventListener('click',function(event){
                noddy=event.target;
                while(noddy.nodeName!=='A'&&noddy.nodeName!=='HTML') noddy=noddy.parentNode;
                if('href' in noddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){
                        event.preventDefault();
                        document.location.href=noddy.href;
                }
        },false);
}
</script>

這個時候再新增到主螢幕，執行看看，應該能夠解決問題。