通过JS自动隐藏手机浏览器的地址栏实现原理与代码_javascript技巧
程序员文章站
2022-05-10 15:01:37
...
大家通过手机自带浏览器打开百度、淘宝，在首页加载完毕后，会自动隐藏页面上方的地址栏，加之这些网站针对手机浏览器做了优化，乍看之下，还真难区分这是WEB APP还是Native App，如下左侧图片为通过safari打开淘宝网的首页，要不是因为底下的浏览器工具栏，还真像Native App。实际上它是有地址的，向下拖动就会看到地址栏，如下右侧图片。
但若你做一个简单页面，比如只有一句话，加上如上脚本，你会悲摧的发现，地址栏就是不自动隐藏；难道window.scrollTo()方法在这个浏览器不生效？
if(document.documentElement.scrollHeight bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}
如下为一个页面示例（默认隐藏地址栏），右图为下拉后看到地址栏的截图：
我是个网页，但不显示滚动条
帐号：
密码：
如何才能实现将浏览器地址栏隐藏呢？百度一下，有很多资料，很简单，主要利用window.scrollTo()方法，将当前页面在屏幕上向上滚动，造成地址栏超出视野范围，如下：
复制代码 代码如下:
但若你做一个简单页面，比如只有一句话，加上如上脚本，你会悲摧的发现，地址栏就是不自动隐藏；难道window.scrollTo()方法在这个浏览器不生效？
但是若你网页内容比较多，超过屏幕高度时，却会自动隐藏地址栏；
如何解决在内容较少时，同样隐藏地址栏呢？需在滚动之前程序动态设置一下body的高度，增加如下代码：
复制代码 代码如下:
if(document.documentElement.scrollHeight bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}
如下为一个页面示例（默认隐藏地址栏），右图为下拉后看到地址栏的截图：
复制代码 代码如下:
帐号：
密码：
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论