码迷,mamicode.com
首页 > 其他好文 > 详细

Safari 导航栏

时间:2020-01-22 18:10:50      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:page   ati   ble   href   -o   nec   The   lib   默认   

目录

引子

最近在 iPhone 的 Safari 查看 h5 页面时,发现有些平台的页面向下滚动时,顶部地址栏和底部导航栏会自动收起,整个页面空间多了不少,可以看到更多信息,这种效果比较适合当前业务场景。之前都没怎么关注这个,查找了一些资料,尝试后总结一下。

隐藏 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 系统占比

随着时间推移,网上不少方法无效,有些是针对特定的系统,下面可以查看系统占比:

参考资料

Safari 导航栏

标签:page   ati   ble   href   -o   nec   The   lib   默认   

原文地址:https://www.cnblogs.com/thyshare/p/12228864.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!