w3ctech

安卓Chrome支持去掉地址栏功能

苹果手机刚刚出来的时候,他们就推出系列meta标签来解决实现WebAPP类APP的问题,只需要在HTML head中添加如下代码就可以隐藏掉浏览器的地址栏和下方bar:

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

但是安卓出来后,并没有这样做,但是最近在我的google N4上更新chrome后,发现通过打开浏览器以后,将网站添加到主屏以后,在桌面上访问这个网站,居然地址不见了。我最开始是别人的网站添加了什么特殊的代码,经过分析,原来就是上面的两段代码起了作用。

我的Chrome版本为:37.0.2062.117

安卓Chrome认为这种方式是网络应用,下面我们来看看方法和效果:

将通过浏览器访问的网站添加到主屏:

添加主屏方法

以前的效果,访问后依然存在地址栏:

存在地址栏

现在的效果,地址栏已经不见了:

不存在地址栏

如果你不信,你如果用的安卓chrome,添加一个w3ctech到你的主屏试试?

w3ctech微信

扫码关注w3ctech微信公众号

共收到5条回复

  • minimal-ui 那这么是干什么用的

    回复此楼
  • @树残由尔 minimal-ui 是用于你直接用浏览器访问的时候,快速隐藏掉用的,就像以前的使用js,滚动100px。

    回复此楼
  • @树残由尔 minimal-ui 是ios7新增的,安卓chrome还不支持。

    回复此楼
  • minimal-ui 在iOS8里被弃用了吧

    回复此楼
  • @Kejun 嗯,是的,不知道为什么弃用

    回复此楼