We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
最近在 iPhone 的 Safari 查看 h5 页面时,发现有些平台的页面向下滚动时,顶部地址栏和底部导航栏会自动收起,整个页面空间多了不少,可以看到更多信息,这种效果比较适合当前业务场景。之前都没怎么关注这个,查找了一些资料,尝试后总结一下。
当页面内容过多,向下滚动时,导航栏和地址栏收起的现象,在 Safari 是正常的特性,以下称为默认隐藏。这是一个纯显示页面,移动端访问如下:
通过查找资料和对比其它平台的页面,主要的思考方向是页面结构和 CSS 样式。
首先想到在项目里面常会引入一个重置样式的库 normalize.css,看下是否会影响这个效果。这是测试页面,移动端访问如下:
测试结果是:不会影响。
然后就是对比页面结构,发现了下面几种情况:
overflow: hidden
需要按照下面的步骤操作:
<meta name="apple-mobile-web-app-capable" content="yes" />
这是示例页面,移动端访问如下:
这种需要用户自己操作多步,推广很难。未找到一直能隐藏导航栏的 h5 示例页面。
在上面的尝试中,一直显示导航栏的情况有:
随着时间推移,网上不少方法无效,有些是针对特定的系统,下面可以查看系统占比:
我叫你一声,你敢扯吗?
最近看完了《环游世界八十天》,不知道为什么,这本书从读高中时代起,就在我的脑海中有印象,直到现在我才花时间看完了。剧情紧凑,故事也有趣,只可惜自己少了想象力,无法想象出书中描述的各地场景,即便有所谓插画,也是非常简洁。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
目录
引子
最近在 iPhone 的 Safari 查看 h5 页面时,发现有些平台的页面向下滚动时,顶部地址栏和底部导航栏会自动收起,整个页面空间多了不少,可以看到更多信息,这种效果比较适合当前业务场景。之前都没怎么关注这个,查找了一些资料,尝试后总结一下。
隐藏 Safari 导航栏
当页面内容过多,向下滚动时,导航栏和地址栏收起的现象,在 Safari 是正常的特性,以下称为默认隐藏。这是一个纯显示页面,移动端访问如下:
默认隐藏
通过查找资料和对比其它平台的页面,主要的思考方向是页面结构和 CSS 样式。
首先想到在项目里面常会引入一个重置样式的库 normalize.css,看下是否会影响这个效果。这是测试页面,移动端访问如下:
测试结果是:不会影响。
然后就是对比页面结构,发现了下面几种情况:
overflow: hidden
,默认隐藏无效。这是示例页面,移动端访问如下:一直隐藏
需要按照下面的步骤操作:
这是示例页面,移动端访问如下:
这种需要用户自己操作多步,推广很难。未找到一直能隐藏导航栏的 h5 示例页面。
显示 Safari 导航栏
在上面的尝试中,一直显示导航栏的情况有:
overflow: hidden
。iPhone 系统占比
随着时间推移,网上不少方法无效,有些是针对特定的系统,下面可以查看系统占比:
参考资料
🗑️
我叫你一声,你敢扯吗?
最近看完了《环游世界八十天》,不知道为什么,这本书从读高中时代起,就在我的脑海中有印象,直到现在我才花时间看完了。剧情紧凑,故事也有趣,只可惜自己少了想象力,无法想象出书中描述的各地场景,即便有所谓插画,也是非常简洁。
The text was updated successfully, but these errors were encountered: