扫码关注官方订阅号
美团网的触屏版是如何隐藏浏览器的地址栏的? 而且还隐藏了浏览器底部的工具栏。 如下图所示,糯米网只是隐藏了浏览器的地址栏,而美团还隐藏了底部的工具栏,更像app。 糯米网:
美团网: 浏览器底部的工具栏变成了右下角的按钮:
展开按钮之后,回复浏览器的工具栏:
请问这是怎么实现的?
<script type="text/javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
这是美团调用了浏览器内置的js接口,隐藏浏览器APP的一部分等等。 这个类似于微信公众平台开发文档给出的隐藏/显示底部工具栏、隐藏/显示右上角分享按钮。
js
APP
现在手机上的浏览器种类较多,为了更好的WEBAPP体验,楼主可以对每个浏览器都搜索一下看看有没有此方面的接口,如果有,做适配就行了,如果没有,那就只能作罢了……毕竟浏览器是APP,是主,是容器,web层能做的只是调用浏览器给出的API。
WEBAPP
web
API
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="x5-fullscreen" content="true">
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
这是美团调用了浏览器内置的
js接口,隐藏浏览器APP的一部分等等。这个类似于微信公众平台开发文档给出的隐藏/显示底部工具栏、隐藏/显示右上角分享按钮。
现在手机上的浏览器种类较多,为了更好的
WEBAPP体验,楼主可以对每个浏览器都搜索一下看看有没有此方面的接口,如果有,做适配就行了,如果没有,那就只能作罢了……毕竟浏览器是APP,是主,是容器,web层能做的只是调用浏览器给出的API。