手机上的H5游戏怎么把地址栏h5隐藏地址栏

来源：蜘蛛抓取(WebSpider) 时间：2016-05-13 11:20 标签： 手机浏览器隐藏地址栏
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
字体：[ ] 类型：转载 时间：
大家通过手机自带浏览器打开百度、淘宝，在首页加载完毕后，会自动隐藏页面上方的地址栏,感兴趣的朋友可以参考下
大家通过手机自带浏览器打开百度、淘宝，在首页加载完毕后，会自动隐藏页面上方的地址栏，加之这些网站针对手机浏览器做了优化，乍看之下，还真难区分这是WEB APP还是Native App，如下左侧图片为通过safari打开淘宝网的首页，要不是因为底下的浏览器工具栏，还真像Native App。实际上它是有地址的，向下拖动就会看到地址栏，如下右侧图片。
如何才能实现将浏览器地址栏隐藏呢？百度一下，有很多资料，很简单，主要利用window.scrollTo()方法，将当前页面在屏幕上向上滚动，造成地址栏超出视野范围，如下： 代码如下:&script& window.onload=function(){ setTimeout(function() { window.scrollTo(0, 1) }, 0); }; &/script&但若你做一个简单页面，比如只有一句话，加上如上脚本，你会悲摧的发现，地址栏就是不自动隐藏；难道window.scrollTo()方法在这个浏览器不生效？
但是若你网页内容比较多，超过屏幕高度时，却会自动隐藏地址栏；
如何解决在内容较少时，同样隐藏地址栏呢？需在滚动之前程序动态设置一下body的高度，增加如下代码： 代码如下:if(document.documentElement.scrollHeight &= document.documentElement.clientHeight) { bodyTag = document.getElementsByTagName('body')[0]; bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px'; }如下为一个页面示例（默认隐藏地址栏），右图为下拉后看到地址栏的截图：
代码如下:&!DOCTYPE html& &html& &head& &meta charset=utf-8 /& &meta name="viewport" content="width=device-width, initial-scale=1,"& &title&我是个网页，但不显示滚动条&/title& &script& window.onload=function(){ if(document.documentElement.scrollHeight &= document.documentElement.clientHeight) { bodyTag = document.getElementsByTagName('body')[0]; bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px'; } setTimeout(function() { window.scrollTo(0, 1) }, 0); }; &/script& &style& /*输入框圆角显示*/ input { background:# border: 1px solid #080; padding:5 -webkit-border-radius:5 } /* button ---------------------------------------------- */ .button { display: inline- zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: vertical-align: margin: 0 2 outline: cursor: text-align: text-decoration: font: 14px/100% Arial, Helvetica, sans- padding: .5em 2em .55 text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); } /* green */ .green { color: #e8f0 border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); } &/style& &/head& &body style="background: #"& &div style="padding-top:40%;padding-left:20%"& 帐号：&input type="text"&&br/& 密码：&input type="text"&&br/& &div& &div style="padding-top:5%;padding-left:23%"&&input type="button" class="button green" value="登录"&&/div& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 手机浏览器隐藏地址栏 的文章

 

随机推荐