先来看一张截图

  

  红色框处就是用手机浏览器打开页面时,自动显示出来的头部地址栏和底部工具栏

  如果现在有一个需求,用手机浏览器打开页面时,把地址栏和工具栏隐藏,该怎么办呢?

  

  起初我在度娘找到了好几篇博客都推荐如下方法  

 <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 打开网页时的地址栏和工具栏探索的更多相关文章

  1. 微信QQ打开网页时提示用浏览器打开

    微信QQ打开网页时提示用浏览器打开 一,需求分析 1.1,使用微信或QQ打开网址时,无法在微信或QQ内打开常用下载软件,手机APP等.故此需要在微信qq里提示 二,功能实现 2.1 html实现 &l ...

  2. 在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码、通讯内容或信用卡信息)

    现象:在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码.通讯内容或信用卡信息). 当点开"了解详情"后显示 ...

  3. Win2003打开网页时总是提示添加网址到信任站点的设置方法

    在WIN2003系统中,我们打开网页,或打开网站,或浏览网页时,老是跳出一个窗口提示“添加网址到信任站点”,“网页老是提示添加信任”或“2003每打开一次网页都要加入受信任站点”或“win2003提示 ...

  4. IOS safari浏览器登陆时Cookie无法保存的问题

    近期完成了一个儿童的测评项目,测试到最后的时候发现在ipad mini上登陆成功之后无法跳转页面,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没问题,只能一个一个的调试,结果发现设备的 ...

  5. 用webview打开网页时,里面有个div带滚动条的,但是在平板上滚动条失效

    android2.3的不支持滚动条,并且scrollTop也不支持的.(设置overflow未hidden就可以支持). function noBarsOnTouchScreen(arg) { var ...

  6. 用JS打开网页时自动更改css样式,可用于处理浏览器兼容

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位

    input失去焦点,页面被顶起没有还原,所以就有以下的方法来处理 $("input").blur(function(){   setTimeout(() => {    co ...

  8. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  9. inno安装卸载时检测程序是否正在运行卸载完成后自动打开网页-代码无效

    inno安装卸载时检测程序是否正在运行卸载完成后自动打开网页-代码无效 inno setup 安装卸载时检测程序是佛正在运行卸载完成后自动打开网页-代码无效 --------------------- ...

随机推荐

  1. 在 Docker 容器中运行应用程序

    案例说明 运行 3 个容器,实现对网站的监控. 三个容器的说明: 容器 web: 创建自 nginx 映像,使用 80 端口,运行于后台,实现 web 服务. 容器 mailer: 该容器中运行一个 ...

  2. git学习(持续踩坑中🤣)

    https://segmentfault.com/q/1010000002457936 常见指令: 一.创建版本库 $ mkdir learngit 创建文件夹 $ cd learngit 进入文件夹 ...

  3. 把一个机器上1天内新增的文件用rsync传送到另外一台机器

    我的shell很菜,只好用shell和php结合来做 1.查找新增的文件,构造rsync的参数,把结果写入到log中 find /data/bmob/test/teststorage/data/ -m ...

  4. pdb 调试

    以前写python一直用pycharm,调试啥的比较方便,最近要在远程服务器上调试一些程序,只有一个控制台就可以用pdb进行调试了.常用的只有几个命令. break 或 b 设置断点 continue ...

  5. BZOJ_4016_[FJOI2014]最短路径树问题_最短路+点分治

    BZOJ_4016_[FJOI2014]最短路径树问题_最短路+点分治 Description 给一个包含n个点,m条边的无向连通图.从顶点1出发,往其余所有点分别走一次并返回. 往某一个点走时,选择 ...

  6. BZOJ_1579_[Usaco2009 Feb]Revamping Trails 道路升级_分层图最短路

    BZOJ_1579_[Usaco2009 Feb]Revamping Trails 道路升级_分层图最短路 Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M ...

  7. 关于table表格 td里内容较多换行的处理方法

    最近在用table的时候由于td内容较多默认换行了,很不美观.于是找到处理方法: 在声明table的时候添加一个样式: <table id="tbOffice" data-r ...

  8. python接口自动化(二十五)--unittest断言——下(详解)

    简介 本篇还是回归到我们最初始的话题,想必大家都忘记了,没关系看这里:传送门  没错最初的话题就是登录,由于博客园的登录机制改变了,本篇以我找到的开源免费的登录API为案例,结合 unittest 框 ...

  9. 一个实时收集MySql变更记录的组件CanalSharp.AspNetCore

    一.关于CanalSharp CanalSharp 是阿里巴巴开源项目 Canal 的 .NET 客户端.为 .NET 开发者提供一个更友好的使用 Canal 的方式.Canal 是mysql数据库b ...

  10. 生产环境一键创建kafka集群

    前段时间公司的一个kafka集群出现了故障,由于之前准备不足,当时处理的比较慌乱.如:由于kafka的集群里topic数量较多,并且每个topic的分区数量和副本数量都不是一样的,如果按部就班的一个一 ...