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...