先来看一张截图

  

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

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

  

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

 <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. 17.app后端如何保证通讯安全--aes对称加密

    在上文<16.app后端如何保证通讯安全--url签名>提到,url签名有两个缺点,这两个缺点,如果使用对称加密方法的话,则完全可以避免这两个缺点.在本文中,会介绍对称加密的具体原理,和详 ...

  2. Java通过JDBC 进行MySQL数据库操作

    转自: http://blog.csdn.net/tobetheender/article/details/52772157 Java通过JDBC 进行MySQL数据库操作 原创 2016年10月10 ...

  3. Dubbo中暴露服务的过程解析

    dubbo暴露服务有两种情况,一种是设置了延迟暴露(比如delay="5000"),另外一种是没有设置延迟暴露或者延迟设置为-1(delay="-1"): 设置 ...

  4. MFC学习笔记_关于CSpinButtonCtrl

    CSpinButtonCtrl使用起来比较特殊,使用起来,需要注意一些地方.实际的教程也比较少.为了让后人少走弯路,这里写这篇文章以说明.1.添加EDIT控件2.添加Spin控件如果不是这样的顺序的话 ...

  5. 【bzoj2331】[SCOI2011]地板

    题目链接: TP 题解: 分类讨论好烦啊! 0表示没有插头,1.2表示有插头,1表示接下来可以转弯,2表示接下来不能转弯,只能停在一个地方. 然后分类讨论: 插头状态 到达状态 0 0 2 2 | 1 ...

  6. B20J_1297_[SCOI2009]迷路_矩阵乘法

    B20J_1297_[SCOI2009]迷路_矩阵乘法 题意:有向图 N 个节点,从节点 0 出发,必须恰好在 T 时刻到达节点 N-1.总共有多少种不同的路径? 2 <= N <= 10 ...

  7. QTimer在QThread环境中失效的问题

    QTimer在非QThread的环境下能正常工作.但在QThread环境下,需要做一些改动才能正常工作. 创建Qt的线程有两种方式: 1. 子例化QThread 可以在虚函数run中启动定时器,大致的 ...

  8. jquery中attr()和prop()的区别

    最近项目回归使用jquery,页面渲染全是使用jquery做的,所以做的时候也遇到了许多以前没有见过的问题,如这次操作[radio]控件的"checked"属性时有遇到问题, $( ...

  9. Mark一下~

    今天在cnblogs开通了博客,mark一下~ 上半年的Rebase阶段已经完成,希望下半年的Promotion阶段能收获满满,也希望自己能写出高质量的博客.

  10. Node.js + MySQL 实现数据的增删改查

    通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...