安卓谷歌浏览器全屏打开HTML
一开始打算,将vue项目嵌入到webview中,发布到大屏设备页面中有地图拖拽等功能,使用crosswalk嵌入后,交互变的很卡顿腾讯X5和Chrome内核都有试过,crosswalk也不在维护安卓工程师最近也很忙,没有时间去做这个事情后来想,干脆曲线救国在大屏上直接下载浏览器,让浏览器全屏用了两种方式第一个:<meta name="mobile-web-ap...
一开始打算,将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上,无论如何我们将始终具有软/硬后退按钮)
- 没有重新加载按钮,因此所有内容均应由应用管理。如果我们更改内容以获取更新,则用户将需要等待直到操作系统将其从内存中删除为止,才能从“近期应用程序”列表中删除该应用程序,或者我们可以提供自己的重新加载按钮。
- 除了方向更改外,视口也不会更改(例如工具栏的出现/消失)
附查阅链接:
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,完成全屏定时开关机和远程升级等功能
建议:类似谷歌浏览器明文禁止的规定,非用户主动全屏的操作,不要浪费时间!
更多推荐
所有评论(0)