医院的项目，由于采用的是Web APP模式，移动护理平台，对于操作的护士来说不需要他们输入和修改浏览器地址，找了很久的解决方案，一直没找到有效的能够隐藏浏览器地址栏和下部导航栏的方法，有介绍采用window.scrollTo()实现的，但是治标不治本，实现的效果有限，附上代码大家也可以探讨一下。今天看到一个帖子介绍方法的，实验了一下效果蛮不错，推荐一下。
有效的方法：（此方法效果较好，建议采用）
Android 和 ios两个平台要用不同的实现方法。
Android版的实现方法：
执行上面那段代码就可以让页面进入全屏模式，底部导航，和顶部的地址栏是看不到的喔~
IOS版的实现方法：
给页面添加一个载入事件的监听；
页面载入完成后，延迟100毫秒后使页面向上移动一部分，使地址栏隐藏掉。
js代码如下：
不难发现，如果页面高度不够的情况下，这个方法是没办法隐藏地址栏的。
解决方法就是在滚动页面的时候，给页面设置一个高度。
修改后的代码如下：
最后，还要记得在head里加上这两句：
转自：/245.html
方法2：（此方法实现的效果不好，不建议采用）
主要利用window.scrollTo()方法，将当前页面在屏幕上向上滚动，造成地址栏超出视野范围，如下：
[javascript]view plain copy<script> window.οnlοad=function(){ setTimeout(function(){ window.scrollTo(0,1) },0); }; </script> 但若你做一个简单页面，比如只有一句话，加上如上脚本，你会悲摧的发现， 地址栏就是不自动隐藏 ；难道window.scrollTo()方法在这个浏览器不生效？
但是若你网页内容比较多，超过屏幕高度时，却会自动隐藏地址栏；
如何解决在内容较少时，同样隐藏地址栏呢？需在滚动之前程序动态设置一下body的高度，增加如下代码：
[javascript]view plain copyif(document.documentElement.scrollHeight<=document.documentElement.clientHeight){ bodyTag=document.getElementsByTagName('body')[0]; bodyTag.style.height=document.documentElement.clientWidth/screen.width*screen.height+'px'; }
如下为一个页面示例（默认隐藏地址栏），右图为下拉后看到地址栏的截图：
如上截图的完整源码如下：
[html]view plain copy<!DOCTYPEhtml> <html> <head> <metacharset=utf-8/> <metaname="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:1pxsolid#080; padding:5px; -webkit-border-radius:5px; } /*button ----------------------------------------------*/ .button{ display:inline-block; zoom:1;/*zoomand*display=ie7hackfordisplay:inline-block*/ *display:inline; vertical-align:baseline; margin:02px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100%Arial,Helvetica,sans-serif; padding:.5em2em.55em; text-shadow:01px1pxrgba(0,0,0,.3); -webkit-border-radius:.5em; -webkit-box-shadow:01px2pxrgba(0,0,0,.2); } /*green*/ .green{ color:#e8f0de; border:solid1px#538312; background:#64991e; background:-webkit-gradient(linear,lefttop,leftbottom,from(#7db72f),to(#4e7d0e)); } </style> </head> <bodystyle="background:#ededed;"> <divstyle="padding-top:40%;padding-left:20%"> 帐号：<inputtype="text"><br/> 密码：<inputtype="text"><br/> <div> <divstyle="padding-top:5%;padding-left:23%"><inputtype="button"class="buttongreen"value="登录"></div> </body> </html>
如上按钮的效果，参考自：/demo/css-buttons.html
要实现更为完整的隐藏地址栏的效果，可参考：/?c=iPhoneAddressBar
转自：/hbcui1984/article/details/8350107
