移动端WebApp隐藏地址栏的方法
作者:junjie 发布时间:2022-09-26 20:26:29
1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。
<meta name="apple-mobile-web-app-capable" content="yes" />
2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动窗口,这个确实有效,唯一要注意的是页面高度必须够高,核心代码如下:
<script type="text/javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}
</script>
3、但是当页面高度自适应窗口(height:100%),以上方法就不适用了,我们需要采用特殊方法:
$('div').css("height",window.innerHeight+100); //强制让内容超过
window.scrollTo(0, 1);
$("div").css("height",window.innerHeight); //重置成新高度
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); //如果不想让页面滑动,可以加上这段代码
4、分享一下开源项目
移动前端界面进去的时候,我们会看到地址工具条,这看起来不怎么像一个APP,那么怎么隐藏掉这个地址条,下面提供了一个比较合适的代码,支持ios和Android.
/*! Normalized address bar hiding for iOS & Android (c) @scottjehl MIT License */
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if(!win.navigator.standalone && !location.hash && win.addEventListener ){
//scroll to 1
win.scrollTo( 0, 1 );
var scrollTop = 1,
getScrollTop = function(){
return win.pageYOffset || doc.compatMode === "CSS1Compat" && doc.documentElement.scrollTop || doc.body.scrollTop || 0;
},
//reset to 0 on bodyready, if needed
bodycheck = setInterval(function(){
if( doc.body ){
clearInterval( bodycheck );
scrollTop = getScrollTop();
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 15 );
win.addEventListener( "load", function(){
setTimeout(function(){
//at load, if user hasn't scrolled more than 20 or so...
if( getScrollTop() < 20 ){
//reset to hide addr bar at onload
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 0);
}, false );
}
})( this );
详细请访问:https://github.com/scottjehl/Hide-Address-Bar
如果你的浏览器支持标签隐藏的话:
<meta name="apple-mobile-web-app-capable" content="yes" />
猜你喜欢
- 本文以实例形式详细讲述了Java的反射机制,是Java程序设计中重要的技巧。分享给大家供大家参考。具体分析如下:首先,Reflection是
- 一、简介当要将配置中心部署到生产环境中时,与服务注册中心一样,我们也希望它是一个高可用的应用。Spring Cloud Config实现服务
- 一、递归的思路一个方法在执行时,调用自身被称为“递归”。递归相当于数学归纳法,有一个起始条件,有一个递推公式。递归可以分为:单路递归和多路递
- @Resource和@Autowired是Spring Framework中两种常用的注入方式,它们的作用是在Spring容器中自动装配Be
- 在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我
- 目录什么是异常?编译时还是运行时?“受检异常”究竟可不可取?我的观点什么是异常?要了解受检异常,首先要了解什么是异常。在Java中,异常是一
- 解决办法:1.VCS--->Enable Version Control Integration2.选择要关联的版本工具补充:git
- 本文为大家分享了java interface的两个经典用法,供大家参考,具体内容如下1.Java多态接口动态加载实例编写一个通用程序,用来计
- 目录Map的computeIfAbsent使用场景和方法常规实现使用computeIfAbsent方法实现Map中computeIfAbse
- AndroidStduio3.0使用gradle将module打包jar文件,首先需要安装gradle。打开控制台输入  
- 1、如何解决服务之间的通信问题?[1]HTTP REST方式 使用http协议进行数据传递 json格式数据[2]RPC方式 远程过程调用
- 本文实例讲述了C#获取程序文件相关信息的方法,分享给大家供大家参考。具体实现方法如下:using System.Reflection;usi
- 什么是注解?对于很多初次接触的开发者来说应该都有这个疑问?Annontation是Java5开始引入的新特征,中文名称叫注解。它提供了一种安
- 你是否受够了每次修改静态文件都要重启服务器?有时候在一些公司前后端的职责没有那么的明确,往往后台人员也要去写一些页面,像jsp页面,或者其他
- 注释介绍@Cacheable@Cacheable 的作用 主要针对方法配置,能够根据方法的请求参数对其结果进行缓存@Cacheable 作用
- public static String getCharset(File file) { &n
- 在[高并发Java 二] 多线程基础中,我们已经初步提到了基本的线程同步操作。这次要提到的是在并发包中的同步控制工具。1. 各种同步控制工具
- 1、mybatis-plus相信大家在日常的开发中用的最多的就是 mybatis-plus了吧,作为一个 MyBatis (opens ne
- Ping pingSender = new Ping(); PingReply reply = pingSender.Send("
- 写了一个人民币小写转大写的方法,Java版本,思路很简单,没有测出什么Bug,有bug欢迎反馈public class RMBChange