怎么隐藏 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 安装卸载时检测程序是佛正在运行卸载完成后自动打开网页-代码无效 --------------------- ...
随机推荐
- SwaggerUI--SosoApi
1.SwaggerUI是什么? Swagger UI是一款RESTFUL接口的文档在线自动生成+功能测试功能软件. Swagger-UI 的官方地址:http://swagger.io/ Github ...
- java之集合Collection 3个例子
package cn.itcast_01; import java.util.ArrayList; import java.util.Collection; /* * 集合的由来: * 我们学习的是面 ...
- 21.app后端如何高效更新内容
在app的主页或通知栏,经常需要通过api取最新的数据.那么,怎么在这部分上做优化,使获取内容的效率更高呢?在本文中,通过推拉和增量更新,实现了一种高效获取数据的策略. 1.高效更新数据策略在app中 ...
- pymysql和 SQLAlchemy在python下的使用
#!/usr/bin/env python # -*- coding:utf-8 -*- from sqlalchemy import create_engine, Table, Column, In ...
- list control控件的一些操作
一.添加数据 这里介绍的是最平常的添加方法,当然也有很多其他比较好的方法.这里要非常注意添加顺序.先上代码: //导入excel文档中的内容到list中 CoInitialize(NULL); if ...
- 模板——无旋Treap
#include "bits/stdc++.h" using namespace std; inline int read(){ ,k=;char ch=getchar(); :, ...
- 【codeforces 516B】Drazil and Tiles
题目链接: http://codeforces.com/problemset/problem/516/B 题解: 首先可以得到一个以‘.’为点的无向图,当存在一个点没有边时,无解.然后如果这个图边双联 ...
- 【状压dp】Bzoj2064 分裂
Description 背景: 和久必分,分久必和... 题目描述: 中国历史上上分分和和次数非常多..通读中国历史的WJMZBMR表示毫无压力. 同时经常搞OI的他把这个变成了一个数学模型. 假设中 ...
- 实验吧——隐写术之复杂的QR_code
好久没有更新隐写术方面的题目了,对不起各位小可爱,今天我会多多更新几篇文章,来慰藉你们! 永远爱你们的 ---------新宝宝 1:复杂的QR_code 解题思路:保存图片之后使用在线解码工具,并没 ...
- Twitter分布式自增ID算法snowflake原理解析
以JAVA为例 Twitter分布式自增ID算法snowflake,生成的是Long类型的id,一个Long类型占8个字节,每个字节占8比特,也就是说一个Long类型占64个比特(0和1). 那么一个 ...