一开始打算,将vue项目嵌入到webview中,发布到大屏设备

页面中有地图拖拽等功能,使用crosswalk嵌入后,交互变的很卡顿

腾讯X5和Chrome内核都有试过,crosswalk也不在维护

安卓工程师最近也很忙,没有时间去做这个事情

后来想,干脆曲线救国

在大屏上直接下载浏览器,让浏览器全屏

用了两种方式

第一个:

<meta name="mobile-web-app-capable" content="yes">

<!--ios和Android都支持-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--仅Android支持-->
<meta name="mobile-web-app-capable" content="yes">

添加meta标签,打开谷歌浏览器点击添加到主屏幕,重新启动,实现自动全屏。

解释:

具备网络应用功能意味着在以下情况下我们的内容可以正常工作:

  • 没有网址栏
  • 屏幕上没有后退或前进按钮(在Android上,无论如何我们将始终具有软/硬后退按钮)
  • 没有重新加载按钮,因此所有内容均应由应用管理。如果我们更改内容以获取更新,则用户将需要等待直到操作系统将其从内存中删除为止,才能从“近期应用程序”列表中删除该应用程序,或者我们可以提供自己的重新加载按钮。
  • 除了方向更改外,视口也不会更改(例如工具栏的出现/消失)

附查阅链接:

https://stackoverflow.com/questions/4617073/meta-tag-apple-mobile-web-app-capable-for-android?r=SearchResults

http://www.mobilexweb.com/blog/home-screen-web-apps-android-chrome-31

第二个:

第一种方式,对于我本地访问页面,使用file地址解析后,谷歌浏览器的“添加到主屏幕”选项不见了,不太清楚原因,可能和本地文件或者地址有关系

 launchFullscreen() {
      let element=document.documentElement;
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    }
  • element.requestFullscreen()(目前在 Chrome、Firefox 和 IE 中添加前缀):以全屏模式显示元素。
  • document.exitFullscreen()(目前在 Chrome、Firefox 和 IE 中添加前缀。 Firefox 改用 cancelFullScreen()):取消全屏模式。
  • document.fullscreenElement(目前在 Chrome、Firefox 和 IE 中添加前缀):如有任何元素处于全屏模式,返回 true。

备注:很多方法异曲同工,但不能自动触发,只能主动触发

最后的解决方案:

更换系统的webview嵌入H5,完成全屏定时开关机和远程升级等功能

建议:类似谷歌浏览器明文禁止的规定,非用户主动全屏的操作,不要浪费时间!

Logo

前往低代码交流专区

更多推荐