先来看一张截图

  

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

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

  

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

 <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. 我们的java基础到底有多差 一个视频引发的感想

    以此文来警示自己. 大三要结束了. 我从大一下学期开始接触java,两年半了,期间有很努力的自学,也参与了一下项目,满以为自己的java基础应该不错,但今天在网上看了一个视频才发现自己学的是多么的&q ...

  2. SimpleXML系列函数操作XML

    创建SimpleXML对象 种方法来创建对象,分别是: l  Simplexml_load_file()函数,将指定的文件解析到内存中. l  Simplexml_load_string()函数,将创 ...

  3. 连接Redis后执行命令错误 MISCONF Redis is configured to save RDB snapshots

    今天在redis中执行setrange name 1 chun 命令时报了如下错误提示: (error) MISCONF Redis is configured to save RDB snapsho ...

  4. Python不同目录间模块调用

    #!/usr/bin/python # -*- coding: utf-8 -*- # 导入其它目录下的文件, 需要去帮获取当前程序的绝对路径并加入到环境变量的相对路径中 import os impo ...

  5. 在使用MFC对话框时遇到的用户交互

    有时我们需要点击对话框上的一个按钮的时候,对话框隐藏起来,然后执行完某个操作后,对话框又弹出来, 这时我们可以使用BeginEditorCommand()和CompleteEditorCommand( ...

  6. Luogu_2597_[ZJOI2012]灾难 倍增lca + 构造

    Luogu_2597_[ZJOI2012]灾难 倍增lca + 构造 题意: 我们用一种叫做食物网的有向图来描述生物之间的关系:一个食物网有N个点,代表N种生物,如果生物x可以吃生物y,那么从y向x连 ...

  7. linux 文本编辑 软件管理

    gerp 命令 : grep是强大的文本搜索工具,它对文本文件逐行查看,如果找到匹配的模式,就会打印出包含此模式的所有行,并且grep支持正则表达式 1  grep 选项 模式 被查找文件 : gre ...

  8. numpy C语言源代码调试(二)

    前一篇已经介绍,可以使用gdb进行调试,但是本人不太习惯gdb的文本界面,所以希望找一个比较好用的gdb的前端gui调试器. 想到的第一个是一个非常老的调试工具,DDD. DDD - Data Dis ...

  9. SQL Server 容易忽略的错误

    一.概述 因为每天需要审核程序员发布的SQL语句,所以收集了一些程序员的一些常见问题,还有一些平时收集的其它一些问题,这也是很多人容易忽视的问题,在以后收集到的问题会补充在文章末尾,欢迎关注,由于收集 ...

  10. Java 12 正式发布,8大新特性

    自 2 月 7 日开始,Java/JDK 12 就进入了 RC 阶段.按照发布周期,美国当地时间 3 月 19 日,也就是北京时间 20 号 Java 12 正式发布了! 1.Shenandoah:低 ...