怎么隱藏 iOS Safari 打開網頁時的地址欄和工具欄探索

 

　　先來看一張截圖

　　

　　紅色框處就是用手機瀏覽器打開頁面時，自動顯示出來的頭部地址欄和底部工具欄

　　如果現在有一個需求，用手機瀏覽器打開頁面時，把地址欄和工具欄隱藏，該怎么辦呢？

 

　　

　　起初我在度娘找到了好幾篇博客都推薦如下方法　　

　<meta name="viewport" content="minimal-ui">

　　注：但使用該方法沒有效果（可能該屬性只針對 iOS 7.1 的 Safari 有用）

　　

　　

　　

　　幾經波折，我發現並沒有直接能夠隱藏掉地址欄和工具欄的方法，但有一個折中的方法。

　  手機瀏覽器打開頁面時，地址欄和工具欄不隱藏，當你往上滑動頁面時再隱藏，往下滑動頁面時再顯示

　window.onload = function() {
      setTimeout(function() {
          window.scrollTo(0, 1)
             }, 0);
       };

　　但加上這段代碼后，可能沒有效果。這是因為頁面內容較少時，不會隱藏地址欄；但網頁內容較多，超過屏幕可視高度，才會自動隱藏地址欄

 

 

　 那如何解決在內容較少時，同樣隱藏地址欄呢？添加如下代碼即可

　　　　　　window.onload = function() {
                scroll();
            }

            function scroll() {
                if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
                    bodyTag = document.getElementsByTagName('body')[0];
                    bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
                }
            }

 

 

　　參考原文鏈接：https://blog.csdn.net/hbcui1984/article/details/8350107

　　

　　補充：還有一種更簡單的方法，直接使用meta標簽

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