移动端WebApp隐藏地址栏的方法_Android

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" />

时间: 2024-10-30 02:26:52

移动端WebApp隐藏地址栏的方法_Android的相关文章

移动端WebApp隐藏地址栏的方法

这篇文章主要介绍了移动端WebApp隐藏地址栏的方法,本文分别给出了4种方法,适应不同情况下使用,小编推荐最后一个方法,需要的朋友可以参考下     1.很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊.  代码如下: <meta name="apple-mobile-web-app-capable" content="yes" /> 2.我们可以通过另一种方法来隐藏地址栏.在页面加载完成之后滚动窗口,这个确实有效,唯一要注意的是页

Android端实现单点登录的方法详解_Android

前言 单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉.实现单点登录说到底就是要解决如何产生和存储那个信任,再就是其他系统如何验证这个信任的有效

移动端webapp开发必备知识

原文地址:http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html 转载自:移动终端开发必备知识 请尊重版权,转载请注明来源,多谢~~ 移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels

找出IIS中隐藏网站的方法_win服务器

打开IIS的管理器->选定一个文件夹->点击鼠标右键->选择"资源管理器",切换到网站的根目录,新建一个文件夹这里取名为"liuqq",接着我们到"x:\windows\system32" (当然这个目录是任意的,其中的x代表系统盘)那里新建一个文件夹取名"liuhack",回到IIS的管理器刷新就会看到,"liuqq"这个目录.选中"liuqq"目录,点击右键->

CSS隐藏文字的方法

h1标签对提高SEO关键词排名的作用想必是个站长都知道,但是h1标签会使文字变大,有时候会在网页中显得格格不入.下面小编来跟大家分享下CSS隐藏文字的方法. 下面就拿网络教学基地logo部分用CSS隐藏文字来给大家举例: 我们从h1代码部分看到的其实只是文字描述,但是为了整体美观考虑,我们把h1标签里面的a链接文字用CSS隐藏,并且设置背景图片logo,这样外观看到的就是logo图片 CSS隐藏文字代码: h1 a { height: 80px; width: 280px; float: lef

Excel表格中不复制隐藏数据的方法

Excel表格中不复制隐藏数据的方法   首先选定隐藏的区域,按组合键Alt +;(分号),再按Ctrl+C复制.这样,复制的内容就不包括隐藏内容啦.试试吧. wps教程 word教程 Excel教程

DIV CSS隐藏内容样式方法大全

 DIV CSS网页布局有很多值得学习的地方,这里和大家重点讨论一下DIV CSS隐藏内容样式方法,相信本文介绍一定会让你有所收获.   DIV CSS隐藏内容样式方法   CSS隐藏的用途   1.对文本的隐藏   2.隐藏超链接(另类黑链)   3.对统计代码隐藏   4.隐藏超出图片   5.CSS隐藏滚动条   6.CSS来隐藏DIV层   使用CSS隐藏方法   1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSSdisplay手册查看   2.使用overfl

把word2003中部分文字隐藏起来的方法

  例如学校老师在编辑试卷时,希望打印出来的试卷只有题目并隐藏答案. 下面告诉你把Word2003文档中部分文字隐藏起来的方法.具体操作步骤如下所述: 第1步,选中需要隐藏的文字,然后在菜单栏上依次单击"格式"→"字体"命令. 第2步,在打开的"字体"对话框中,选中"隐藏文字"复选框,并单击"确定"按钮.这样即可将选中的文字隐藏,如图一所示. 图一 选中"隐藏文字"复选框 三联推荐:点击

js实现鼠标感应向下滑动隐藏菜单的方法

 这篇文章主要介绍了js实现鼠标感应向下滑动隐藏菜单的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 { BACKGROUND-COLOR: blue; BOR