通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013-01-02 00:00
936 查看
大家通过手机自带浏览器打开百度、淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App。实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片。
如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏超出视野范围,如下:
但若你做一个简单页面,比如只有一句话,加上如上脚本,你会悲摧的发现,地址栏就是不自动隐藏;难道window.scrollTo()方法在这个浏览器不生效?
但是若你网页内容比较多,超过屏幕高度时,却会自动隐藏地址栏;
如何解决在内容较少时,同样隐藏地址栏呢?需在滚动之前程序动态设置一下body的高度,增加如下代码:
如下为一个页面示例(默认隐藏地址栏),右图为下拉后看到地址栏的截图:
如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用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:#fff; border: 1px solid #080; padding:5px; -webkit-border-radius:5px; } /* button ---------------------------------------------- */ .button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); } /* green */ .green { color: #e8f0de; border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); } </style> </head> <body style="background: #ededed;"> <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>
相关文章推荐
- 通过JS自动隐藏手机浏览器的地址栏实现原理与代码
- 通过JS自动隐藏手机浏览器的地址栏
- 通过JS自动隐藏手机浏览器的地址栏
- 通过JS自动隐藏手机浏览器的地址栏
- 手机自动隐藏浏览器地址栏
- 前端js判断访问站点设备(手机还是PC)实现自动跳转代码
- 通过浏览器的User-Agent实现手机版和电脑版的自动识别切换
- ngrok集成在本地Node.js项目服务器,实现F5调试即可自动打开浏览器且通过外网可访问本地服务器。
- js隐藏手机浏览器地址栏
- 手机浏览器隐藏地址栏的代码
- JS 动态判断PC和手机浏览器实现代码
- 解决网页在手机浏览器打开不停刷新的方案(百度的ua自动转向js问题)
- 在代码隐藏页中实现执行某操作成功后,间隔几秒自动转向某个页面
- JS实现在Repeater控件中创建可隐藏区域的代码
- Gitee码云通过WebHooks实现自动同步代码部署
- js根据手机客户端浏览器类型,判断跳转pc/手机网站多个实例代码
- JS实现仿百度输入框自动匹配功能的示例代码
- js输入框邮箱自动提示功能代码实现
- 实现窗体自动隐藏(c代码)
- JS实现先显示大图后自动收起显示小图的广告代码