通过射流研究…自动隐藏手机浏览器的地址栏实现原理与代码

大家通过手机自带浏览器打开百度、淘宝，在首页加载完毕后，会自动隐藏页面上方的地址栏，加之这些网站针对手机浏览器做了优化，乍看之下，还真难区分这是网络应用还是原生应用，如下左侧图片为通过旅行队打开淘宝网的首页，要不是因为底下的浏览器工具栏，还真像原生应用程序。实际上它是有地址的，向下拖动就会看到地址栏，如下右侧图片

如何才能实现将浏览器地址栏隐藏呢？百度一下，有很多资料，很简单，主要利用window.scrollTo()方法，将当前页面在屏幕上向上滚动，造成地址栏超出视野范围，如下：复制代码代码如下：脚本窗口。onload=function(){ setTimeout(function(){ window。scrollto(0，1) }，0)；};/script但若你做一个简单页面，比如只有一句话，加上如上脚本，你会悲摧的发现，地址栏就是不自动隐藏；难道window.scrollTo()方法在这个浏览器不生效？但是若你网页内容比较多，超过屏幕高度时，却会自动隐藏地址栏；如何解决在内容较少时，同样隐藏地址栏呢？需在滚动之前程序动态设置一下身体的高度，增加如下代码：复制代码代码如下： if(文档。文档元素。滚动高度=文档。文档元素。客户端高度){ body tag=document。getelementsbytagname(' body ')[0]；身体标签。风格。高度=文档。文档元素。客户端宽度/屏幕。宽度*屏幕。高度“px”；}如下为一个页面示例（默认隐藏地址栏),右图为下拉后看到地址栏的截图

复制代码代码如下：DOCTYPE html html head meta charset=utf-8/meta name=' viewport ' content=' width=device-width，initial-scale=1，' title我是个网页，但不显示滚动条/title脚本窗户。onload=function(){ if(document。文档元素。滚动高度=文档。文档元素。客户端高度){ body tag=document。getelementsbytagname(' body ')[0]；身体标签。风格。高度=文档。文档元素。客户端宽度/屏幕。宽度*屏幕。高度“px”；} setTimeout(函数(){ window。scrollto(0，1) }，0)；};/脚本风格/*输入框圆角显示*/input {后台： # fffborder: 1px固体# 080;padd :5 px-web套件-边框-半径：5 px} /*按钮- */.按钮{ display : inline-block；变焦： 1；/*缩放和*显示=ie7 hack for display : inline-block */* display : inline；垂直对齐：基线；余量： 0 2pxoutline:无；光标：指针；文本对齐：中心；文本装饰：无；font: 14px/100% Arial，Helvetica，无衬线；划水：5 em 2 em。55 emtext-shadow: 0 1px 1px rgba(0，0，0，3);-网络套件-边界-半径：5个em；-web套件-box-shadow : 0 1px 2px rgba(0，0，0，2);} /*绿色*/。绿色{ color: # e8f0deborder:固体1px # 538312背景技术# 64991后台：-网络套件-渐变（线性，左上，左下，从(#7db72f)到(# 4e7d 0e))；}/style/head body style=' background : # ed；'div style=' padding-top :40%；填充-左侧：20% '帐号：输入类型='text'br/密码：输入类型=' text ' br/div div style=' padding-top :5%；填充-left:23% '输入类型=' button ' class=' button green ' value='登录/div /body /html