Safari 导航栏
2024-09-02 17:25:55
目录
引子
最近在 iPhone 的 Safari 查看 h5 页面时,发现有些平台的页面向下滚动时,顶部地址栏和底部导航栏会自动收起,整个页面空间多了不少,可以看到更多信息,这种效果比较适合当前业务场景。之前都没怎么关注这个,查找了一些资料,尝试后总结一下。
隐藏 Safari 导航栏
当页面内容过多,向下滚动时,导航栏和地址栏收起的现象,在 Safari 是正常的特性,以下称为默认隐藏。这是一个纯显示页面,移动端访问如下:
默认隐藏
通过查找资料和对比其它平台的页面,主要的思考方向是页面结构和 CSS 样式。
首先想到在项目里面常会引入一个重置样式的库 normalize.css,看下是否会影响这个效果。这是测试页面,移动端访问如下:
测试结果是:不会影响。
然后就是对比页面结构,发现了下面几种情况:
- 滚动容器非 body 元素,默认隐藏无效。这是示例页面,移动端访问如下:
- 滚动容器为 body 元素,html 设置了样式
overflow: hidden
,默认隐藏无效。这是示例页面,移动端访问如下:
- 滚动容器为 body 元素,html 默认样式,默认隐藏有效。这是示例页面,移动端访问如下:
一直隐藏
需要按照下面的步骤操作:
- 添加标签
<meta name="apple-mobile-web-app-capable" content="yes" />
,意思是让应用以全屏的方式显示,详细见 Supported Meta Tags 。 - 用 iPhone 的 Safari 打开页面,使用“添加到主屏幕”。
- 回到主屏幕,点击对应图标进入。
这是示例页面,移动端访问如下:
这种需要用户自己操作多步,推广很难。未找到一直能隐藏导航栏的 h5 示例页面。
显示 Safari 导航栏
在上面的尝试中,一直显示导航栏的情况有:
- 滚动容器非 body 元素。
- 滚动容器为 body 元素,html 设置了样式
overflow: hidden
。
iPhone 系统占比
随着时间推移,网上不少方法无效,有些是针对特定的系统,下面可以查看系统占比:
参考资料
- 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-js/issues/837
最新文章
- 在SQL中 给字符串补0方法
- Best way to add Gradle support to IntelliJ Project
- 【转】最大流EK算法
- redis安装与参数说明
- gdb多进程调试
- js之事件
- 大家一起和snailren学java-(四)初始化与清理
- Image Formats
- 在 Visual Studio 2013 中使用 Grunt, Bower 和 NPM
- [geeksforgeeks] Convert a given Binary Tree to Doubly Linked List
- UVa 1645 Count(**)
- 001.XE3添加TPerlRegEx
- Python 集合(set)使用
- iPhone 6 图像渲染揭秘(转)
- The package does not support the device architecture (x86). You can change the supported architectures in the Android Build section of the Project Opt
- Minicom配置及使用详解
- AC Me
- SEO基础内容
- MAVEN简介之——pom.xml
- centos6.5修改yum安装的mysql默认目录
热门文章
- phyon tensorflow 安装(centos)
- 双向链表的简单Java实现-sunziren
- Windows资源管理器卡死(未响应)的解决办法
- 详解 CUDA By Example 中的 Julia Set 绘制GPU优化
- javascript 权威指南二
- gulp常用插件之gulp-cache使用
- 使用Dockerfile构建镜像命令自己的理解
- 阿里支付:User Notice: invalid [default store dir]: /tmp/
- 问题 B: 基础排序III:归并排序
- 0级搭建类001-RedHat Enterprise Linux 8 安装(RHEL 8) 公开