javascript - 美团网的触屏版是如何隐藏浏览器的地址栏的？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 美团网的触屏版是如何隐藏浏览器的地址栏的？

巴扎黑 2017-04-10 13:11:28

[JavaScript讨论组]

3030

美团网的触屏版是如何隐藏浏览器的地址栏的？
而且还隐藏了浏览器底部的工具栏。
如下图所示，糯米网只是隐藏了浏览器的地址栏，而美团还隐藏了底部的工具栏，更像app。
糯米网：

美团网：
浏览器底部的工具栏变成了右下角的按钮：

展开按钮之后，回复浏览器的工具栏：

请问这是怎么实现的？

巴扎黑

全部回复(3)

PHP中文网2017-04-10 13:13:28 3楼

<script type="text/javascript"> 
      addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); 
      function hideURLbar(){ 
                window.scrollTo(0,1); 
      } 
</script>

赞 +0

添加回复

巴扎黑2017-04-10 13:13:28 2楼

这是美团调用了浏览器内置的js接口，隐藏浏览器APP的一部分等等。
这个类似于微信公众平台开发文档给出的隐藏/显示底部工具栏、隐藏/显示右上角分享按钮。

现在手机上的浏览器种类较多，为了更好的WEBAPP体验，楼主可以对每个浏览器都搜索一下看看有没有此方面的接口，如果有，做适配就行了，如果没有，那就只能作罢了……毕竟浏览器是APP，是主，是容器，web层能做的只是调用浏览器给出的API。

赞 +0

添加回复

ringa_lee2017-04-10 13:13:28 1楼

<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">

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>