本文探讨了如何在iPhone的Safari浏览器中实现隐藏和显示导航栏的效果。默认情况下，页面向下滚动时，Safari的顶部地址栏和底部导航栏会自动收起。通过设置meta标签和页面结构，可以影响这一特性。文章提供了测试示例，展示了不同页面结构和CSS样式对导航栏隐藏的影响，并讨论了一直隐藏导航栏的实现方法及其限制。此外，还提到了显示Safari导航栏的情况以及如何查看不同iOS系统的占比。
引子
最近在 iPhone 的 Safari 查看 h5 页面时，发现有些平台的页面向下滚动时，顶部地址栏和底部导航栏会自动收起，整个页面空间多了不少，可以看到更多信息，这种效果比较适合当前业务场景。之前都没怎么关注这个，查找了一些资料，尝试后总结一下。
隐藏 Safari 导航栏
当页面内容过多，向下滚动时，导航栏和地址栏收起的现象，在 Safari 是正常的特性，以下称为默认隐藏。这是一个纯显示页面，移动端访问如下：
默认隐藏
通过查找资料和对比其它平台的页面，主要的思考方向是页面结构和 CSS 样式。
首先想到在项目里面常会引入一个重置样式的库 normalize.css，看下是否会影响这个效果。这是
最低0.47元/天 解锁文章
扫一扫
2528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
