怎么隐藏 iOS Safari 打开网页时的地址栏和工具栏探索
先来看一张截图

红色框处就是用手机浏览器打开页面时,自动显示出来的头部地址栏和底部工具栏
如果现在有一个需求,用手机浏览器打开页面时,把地址栏和工具栏隐藏,该怎么办呢?
起初我在度娘找到了好几篇博客都推荐如下方法
<meta name="viewport" content="minimal-ui">
注:但使用该方法没有效果(可能该属性只针对 iOS 7.1 的 Safari 有用)
几经波折,我发现并没有直接能够隐藏掉地址栏和工具栏的方法,但有一个折中的方法。
手机浏览器打开页面时,地址栏和工具栏不隐藏,当你往上滑动页面时再隐藏,往下滑动页面时再显示
window.onload = function() {
setTimeout(function() {
window.scrollTo(0, 1)
}, 0);
};
但加上这段代码后,可能没有效果。这是因为页面内容较少时,不会隐藏地址栏;但网页内容较多,超过屏幕可视高度,才会自动隐藏地址栏
那如何解决在内容较少时,同样隐藏地址栏呢?添加如下代码即可
window.onload = function() {
scroll();
}
function scroll() {
if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}
}
参考原文链接:https://blog.csdn.net/hbcui1984/article/details/8350107
补充:还有一种更简单的方法,直接使用meta标签
<meta name="apple-mobile-web-app-capable" content="yes" />
怎么隐藏 iOS Safari 打开网页时的地址栏和工具栏探索的更多相关文章
- 微信QQ打开网页时提示用浏览器打开
微信QQ打开网页时提示用浏览器打开 一,需求分析 1.1,使用微信或QQ打开网址时,无法在微信或QQ内打开常用下载软件,手机APP等.故此需要在微信qq里提示 二,功能实现 2.1 html实现 &l ...
- 在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码、通讯内容或信用卡信息)
现象:在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码.通讯内容或信用卡信息). 当点开"了解详情"后显示 ...
- Win2003打开网页时总是提示添加网址到信任站点的设置方法
在WIN2003系统中,我们打开网页,或打开网站,或浏览网页时,老是跳出一个窗口提示“添加网址到信任站点”,“网页老是提示添加信任”或“2003每打开一次网页都要加入受信任站点”或“win2003提示 ...
- IOS safari浏览器登陆时Cookie无法保存的问题
近期完成了一个儿童的测评项目,测试到最后的时候发现在ipad mini上登陆成功之后无法跳转页面,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没问题,只能一个一个的调试,结果发现设备的 ...
- 用webview打开网页时,里面有个div带滚动条的,但是在平板上滚动条失效
android2.3的不支持滚动条,并且scrollTop也不支持的.(设置overflow未hidden就可以支持). function noBarsOnTouchScreen(arg) { var ...
- 用JS打开网页时自动更改css样式,可用于处理浏览器兼容
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位
input失去焦点,页面被顶起没有还原,所以就有以下的方法来处理 $("input").blur(function(){ setTimeout(() => { co ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- inno安装卸载时检测程序是否正在运行卸载完成后自动打开网页-代码无效
inno安装卸载时检测程序是否正在运行卸载完成后自动打开网页-代码无效 inno setup 安装卸载时检测程序是佛正在运行卸载完成后自动打开网页-代码无效 --------------------- ...
随机推荐
- javaweb项目部署到tomcat服务器
http://jingyan.baidu.com/album/a501d80c0c65baec630f5ef6.html?picindex=8
- 解决vi上下左右变ABCD问题
第一步执行sudo apt-get install vim,如果没有出现错误,再次进入vi 尝试一下,看看有没有修改过来,如果出现以下错误E: Package 'vim' has no insta ...
- Spring IOC知识点一网打尽!
前言 只有光头才能变强 回顾前面: 给女朋友讲解什么是代理模式 包装模式就是这么简单啦 单例模式你会几种写法? 工厂模式理解了没有? 在刷Spring书籍的时候花了点时间去学习了单例模式和工厂模式,总 ...
- txn.go
package clientv3 import ( "sync" pb "github.com/coreos/etcd/etcdserver/etcdse ...
- [NOIP2016]愤怒的小鸟 D2 T3
Description Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于(0,0)处,每次Kiana可以用它向第一象限发射一只红色的小鸟,小鸟们的 ...
- 基于SpringBoot从零构建博客网站 - 整合lombok和mybatis-plus提高开发效率
在上一章节中<技术选型和整合开发环境>,确定了开发的技术,但是如果直接这样用的话,可能开发效率会不高,为了提高开发的效率,这里再整合lombok和mybatis-plus两个组件. 1.l ...
- 一文带你超详细了解Cookie
cookie 简介 什么是 cookie cookie,有时我们也用其复数形式 cookies,是服务端保存在浏览器端的数据片段.以 key/value的形式进行保存.每次请求的时候,请求头会自动包含 ...
- 【.NET异步编程系列2】掌控SynchronizationContext避免deadlock
引言: 多线程编程/异步编程非常复杂,有很多概念和工具需要去学习,贴心的.NET提供Task线程包装类和await/async异步编程语法糖简化了异步编程方式. 相信很多开发者都看到如下异步编程实践原 ...
- DataFrameNaFunctions无fill方法
当我使用 spark2.1 ,为了填补 dataframe 里面的 null 值转换为 0 ,代码如下所示: dataframe.na.fill(0) 出现如下错误 Spark version 2.1 ...
- 【机器学习基础】熵、KL散度、交叉熵
熵(entropy).KL 散度(Kullback-Leibler (KL) divergence)和交叉熵(cross-entropy)在机器学习的很多地方会用到.比如在决策树模型使用信息增益来选择 ...