SafariNavigationBar

介绍最近在iPhone上用Safari查看h5页面时，发现在某些平台向下滚动页面时，顶部地址栏和底部导航栏会自动塌陷，整个页面有很多更多的空间。可以看了解更多，这个效果更适合现在的业务场景。之前没怎么关注这个，找了一些资料，试了一下总结了一下。OriginMyGitHub隐藏了Safari导航栏。当页面内容过多向下滚动时，导航栏和地址栏被折叠的现象是Safari中的一个正常特性，这被称为默认隐藏在下方。这是一个纯展示页面，移动端访问如下：默认是通过搜索资料和其他平台对比隐藏页面。主要思考方向是页面结构和CSS样式。首先想到的是normalize.css这个重置样式的库，在项目中经常引入，看看会不会影响这个效果。这是一个测试页面，移动端访问如下：测试结果为：不受影响。然后对比页面结构，发现有以下几种情况：滚动容器不是body元素，默认hidden无效。这是一个示例页面，移动端访问如下：滚动容器为body元素，html有overflow:hidden的样式，默认无效。这是一个示例页面，移动端访问如下：滚动容器为body元素，默认html样式，默认隐藏有效。这是一个示例页面，移动端访问如下：一直隐藏，需要按照以下步骤添加标签，意思是让应用以全屏的方式显示，详见SupportedMetaTags。在iPhone的Safari中打开页面，使用“添加到主屏幕”。回到主界面，点击相应图标进入。这是一个示例页面，移动端接入如下：这种操作需要用户自己进行多个步骤，推广难度大。没有找到始终隐藏导航栏的h5示例页面。显示Safari导航栏在以上尝试中，始终显示导航栏：滚动容器不是body元素。滚动容器为body元素，html设置样式overflow:hidden。iPhone系统的比例随着时间的推移，网上很多方法都失效了，有的是针对特定系统的。您可以查看以下系统的比例：官方苹果开发者第三方统计参考如何在iPhone/HTML5中完全隐藏导航栏如何强制显示移动Safari底部导航栏以编程方式显示？MobileSafari（为什么？！）https://github.com/FrDH/mmenu...