Safari 导航栏

2024-06-01 03:32
文章标签 导航 safari

本文主要是介绍Safari 导航栏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引子

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

  • Origin
  • My GitHub

隐藏 Safari 导航栏

当页面内容过多,向下滚动时,导航栏和地址栏收起的现象,在 Safari 是正常的特性,以下称为默认隐藏。这是一个纯显示页面,移动端访问如下:

61-pure-page

默认隐藏

通过查找资料和对比其它平台的页面,主要的思考方向是页面结构和 CSS 样式。

首先想到在项目里面常会引入一个重置样式的库 normalize.css,看下是否会影响这个效果。这是

这篇关于Safari 导航栏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1019867

相关文章

如何关闭Mac的Safari通知? 3招教你关闭Safari浏览器网站通知的技巧

《如何关闭Mac的Safari通知?3招教你关闭Safari浏览器网站通知的技巧》当我们在使用Mac电脑专注做一件事情的时候,总是会被一些消息推送通知所打扰,这时候,我们就希望关闭这些烦人的Mac通... Safari 浏览器的「通知」功能本意是为了方便用户及时获取最新资讯,但很容易被一些网站滥用,导致我们

Apple quietly slips WebRTC audio, video into Safari's WebKit spec

转自:http://www.zdnet.com/article/apple-quietly-slips-webrtc-audio-video-into-safaris-webkit-spec/?from=timeline&isappinstalled=0 http://www.zdnet.com/article/apple-quietly-slips-webrtc-audio-video-

CSS学习6--背景图片、颜色、位置、附着、简写、透明、缩放、多背景、凹凸文字、导航栏例子

CSS背景 一、背景颜色和图片二、背景位置三、背景附着四、背景简写五、背景透明六、背景缩放七、多背景八、凹凸文字九、导航栏例子 一、背景颜色和图片 background-color: pink; 背景颜色backgroundoimage: url(##.jpg); 背景图片background-repeat: 平铺 repeat-x横向平铺,repeat-y纵向平铺; 平铺不到

Win10 - 删除快速访问导航栏

1、按下 Win + R 键,在运行中输入 regedit 回车,打开注册表 2、然后定位到 HKEY_CLASSES_ROOT\CLSID\{679f85cb-0220-4080-b29b-5540cc05aab6}\ShellFolder 中 3、这时需要对 ShellFolder 进行权限修改,不然是没法修改该项下的数据。参考 Win10注册表获取权限的方法 4、得到权限后,再把把右

组合导航、卫星定位与RTK、石英表计时

导航是现代生活必不可少的基础设施,大到俄乌冲突导弹互相暴揍,小到出门游玩,都离不开导航功能。我们常说导航,但是导航这一功能的核心是定位。沿着定位这条线我们开始本篇文章的内容。 卫星定位的原理 全球卫星定位系统的英文是Global Navigation Satellite System(GNSS),GNSS主要由空间卫星、地面监控系统、用户接收机三部分组成。空间卫星按照一定的频率昼夜不停的通过高

一体化导航技术的应用和优点

导航技术已经在人们日常生活中有着广泛的应用,而一体化导航技术,作为现代导航技术的重要发展方向,正在迅猛的进入市场并且展现出广泛的应用前景。那么它究竟有什么魅力?又是应用到哪些领域的呢?   1、一体化导航技术的定义   一体化导航‌是指将多种导航技术和相关功能集中到一个设备或系统中,来为人们提供全面、高效、准确、便捷的导航服务。   2、一体化导航技术的优点   它有高度的集成性。它将

动态路由和路由导航守卫及其案例分析

为什么需要动态路由? 动态路由其实用的不多,在实际开发中,如果遇到权限分配问题,比如对于一个公司人员的后台管理系统,那对不同成员的权限肯定不同,对于人事部,他们有权限进入成员表对人员的流动进行管理,对于技术部,他们有权上传任务进度来进行团队协作等等。对于不同人员,界面的渲染也不能相同。在有一些公司中可能会采用隐藏组件来实现权限的分配,但这样治标不治本:路由还是注册了,理论上只要知道路径,即使没有

Navigation运维网站导航工具

Navigation 导航网址 recommend: China-Gitee,Other-Github 功能 新增分类删除分类编辑分类查询分类新增网址删除网址编辑网址查询网址新建管理员账号、菜单权限编辑管理员账号、菜单权限导出xls 【管理员】 【访客】 开发环境 名称版本nodejs8.11.4vue2.X 安装 简单命令行即可使用 Doc

Vue(十三) 路由、路由嵌套、query、param传参、propos、replace属性。编程式路由导航,特有的生命周期函数,路由守卫

文章目录 路由1. 基本使用2. 多级(嵌套)路由3. 路由query传参4. 命名路由5. 路由param传参6. propos属性7. replace属性8. 编程式路由导航9. 缓存路由组件10. actived,deactived生命周期函数11. 路由守卫1、全局路由2、独享路由3、组件内路由守卫 12. 路由器工作的两种模式 路由 路由就是一组key-value的

uni-appH5项目实现导航区域与内容区域联动效果

一、需求描述 将导航区域与内容区域实现联动,即点击导航区域,内容区滚动到对应位置,内容区滚动过程中根据内容定位到相对应的导航栏。 效果如下: 侧边导航与内容联动效果 二、功能实现思路分析汇总: 三、具体代码 1、功能一 右侧内容区scroll-view的scroll-into-view属性绑定id,当触发左侧导航2的点击事件时设置subjectId的值,从而实现滚动到对应