Safari 導航欄

引子

最近在 iPhone 的 Safari 查看 h5 頁面時，發現有些平臺的頁面向下滾動時，頂部地址欄和底部導航欄會自動收起，整個頁面空間多了很多，能夠看到更多信息，這種效果比較適合當前業務場景。以前都沒怎麼關注這個，查找了一些資料，嘗試後總結一下。

• Origin
• My GitHub

隱藏 Safari 導航欄

當頁面內容過多，向下滾動時，導航欄和地址欄收起的現象，在 Safari 是正常的特性，如下稱爲默認隱藏。這是一個純顯示頁面，移動端訪問以下：

默認隱藏

經過查找資料和對比其它平臺的頁面，主要的思考方向是頁面結構和 CSS 樣式。

首先想到在項目裏面常會引入一個重置樣式的庫 normalize.css，看下是否會影響這個效果。這是測試頁面，移動端訪問以下：

測試結果是：不會影響。

而後就是對比頁面結構，發現了下面幾種狀況：

• 滾動容器非 body 元素，默認隱藏無效。這是示例頁面，移動端訪問以下：

• 滾動容器爲 body 元素，html 設置了樣式 overflow: hidden ，默認隱藏無效。這是示例頁面，移動端訪問以下：

• 滾動容器爲 body 元素，html 默認樣式，默認隱藏有效。這是示例頁面，移動端訪問以下：

一直隱藏

須要按照下面的步驟操做：

1. 添加標籤 <meta name="apple-mobile-web-app-capable" content="yes" /> ，意思是讓應用以全屏的方式顯示，詳細見 Supported Meta Tags 。
2. 用 iPhone 的 Safari 打開頁面，使用「添加到主屏幕」。
3. 回到主屏幕，點擊對應圖標進入。

這是示例頁面，移動端訪問以下：

這種須要用戶本身操做多步，推廣很難。未找到一直能隱藏導航欄的 h5 示例頁面。

顯示 Safari 導航欄

在上面的嘗試中，一直顯示導航欄的狀況有：

1. 滾動容器非 body 元素。
2. 滾動容器爲 body 元素，html 設置了樣式 overflow: hidden 。

iPhone 系統佔比

隨着時間推移，網上很多方法無效，有些是針對特定的系統，下面能夠查看系統佔比：

• 官方 apple developer
• 第三方統計

參考資料

• How to completely hide the navigation bar in iPhone / HTML5
• How might one force-show the mobile Safari bottom nav bar to show programmatically?
• Mobile Safari (Whyyyy?!)
• https://github.com/FrDH/mmenu...