猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

移动端vue项目，隐藏顶部地址栏和底部工具条

用vue 做移动端h5页面项目，想实现类似全屏效果，去掉手机浏览器的地址栏和底部工具条

<meta name="browsermode" content="application"><meta name="full-screen" content="yes" /><meta name="x5-fullscreen" content="true" /><meta name="x5-page-mode" content="app" /><meta name="360-fullscreen" content="true" />

项目是单页面模式，首次进入是好的，地址栏和工具条都没有，但是只要路径跳转，导航栏和工具条就会出现。手动刷新又会隐藏掉。
我试着用js scrollTop方式实现也不行。
为什么会出现这种情况，有什么办法解决吗。


千巷猫影
浏览 5560回答 2
2回答

慕尼黑8549860

试试这个demo<!DOCTYPE&nbsp;html>&nbsp;<html&nbsp;lang="en">&nbsp;<head>&nbsp;&nbsp;&nbsp;<meta&nbsp;charset="UTF-8">&nbsp;&nbsp;&nbsp;<meta&nbsp;name="viewport"&nbsp;content="width=device-width,&nbsp;initial-scale=1.0">&nbsp;&nbsp;&nbsp;<meta&nbsp;http-equiv="X-UA-Compatible"&nbsp;content="ie=edge">&nbsp;&nbsp;&nbsp;<title>Document</title>&nbsp;&nbsp;&nbsp;<meta&nbsp;name="Generator"&nbsp;content="EditPlus">&nbsp;&nbsp;&nbsp;<meta&nbsp;name="Author"&nbsp;content="">&nbsp;&nbsp;&nbsp;<meta&nbsp;name="Keywords"&nbsp;content="">&nbsp;&nbsp;&nbsp;<meta&nbsp;name="Description"&nbsp;content="">&nbsp;&nbsp;&nbsp;<meta&nbsp;name="full-screen"&nbsp;content="true">&nbsp;</head>&nbsp;<body>&nbsp;&nbsp;&nbsp;<div>123321</div>&nbsp;&nbsp;&nbsp;<script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//进入全屏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;requestFullScreen()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;de&nbsp;=&nbsp;document.documentElement;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(de.requestFullscreen)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de.requestFullscreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(de.mozRequestFullScreen)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de.mozRequestFullScreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(de.webkitRequestFullScreen)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de.webkitRequestFullScreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//退出全屏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;exitFullscreen()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;de&nbsp;=&nbsp;document;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(de.exitFullscreen)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de.exitFullscreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(de.mozCancelFullScreen)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de.mozCancelFullScreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;if&nbsp;(de.webkitCancelFullScreen)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;de.webkitCancelFullScreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.body.addEventListener('click',&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;requestFullScreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//exitFullscreen();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;false);&nbsp;&nbsp;&nbsp;</script>&nbsp;</body>&nbsp;</html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Node.js
exports = module.exports = xxx这样的形式是何意？ 2 回答
Vue.js