标签:page ati ble href -o nec The lib 默认
最近在 iPhone 的 Safari 查看 h5 页面时,发现有些平台的页面向下滚动时,顶部地址栏和底部导航栏会自动收起,整个页面空间多了不少,可以看到更多信息,这种效果比较适合当前业务场景。之前都没怎么关注这个,查找了一些资料,尝试后总结一下。
当页面内容过多,向下滚动时,导航栏和地址栏收起的现象,在 Safari 是正常的特性,以下称为默认隐藏。这是一个纯显示页面,移动端访问如下:
通过查找资料和对比其它平台的页面,主要的思考方向是页面结构和 CSS 样式。
首先想到在项目里面常会引入一个重置样式的库 normalize.css,看下是否会影响这个效果。这是测试页面,移动端访问如下:
测试结果是:不会影响。
然后就是对比页面结构,发现了下面几种情况:
overflow: hidden
,默认隐藏无效。这是示例页面,移动端访问如下:需要按照下面的步骤操作:
<meta name="apple-mobile-web-app-capable" content="yes" />
,意思是让应用以全屏的方式显示,详细见 Supported Meta Tags 。这是示例页面,移动端访问如下:
这种需要用户自己操作多步,推广很难。未找到一直能隐藏导航栏的 h5 示例页面。
在上面的尝试中,一直显示导航栏的情况有:
overflow: hidden
。随着时间推移,网上不少方法无效,有些是针对特定的系统,下面可以查看系统占比:
标签:page ati ble href -o nec The lib 默认
原文地址:https://www.cnblogs.com/thyshare/p/12228864.html