手机浏览器全屏保持问题?

我正在做一个单页面手机网站,用到了pushState

主页面index.html
全屏meta设置:

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

设置首页hash

window.onload=function(){window.history.pushState(null, null, '#index');};

在手机浏览器中访问,无法全屏;把pushState改成replaceState就可以全屏。
首页这样设置没有问题,但是打开其他子页面,比如子页面A.html B.html C.html ... ,需要记录hash,不能简单的replace掉。
我子页面是通过iframe来创建的。

搜索到一篇文章:
https://developers.google.cn/...

里面提到pushState会导致退出全屏,并提到:

如果想保持用户的全屏体验,可以采用以下这两个方案:

  1. 利用可安装网络应用机制进入全屏模式。
  2. 利用 # 片段管理 UI 和应用状态。

这两个办法看不懂,求解

阅读 2.6k
2 个回答

第一个说法可能是说让网页支持PWA(渐进式 Web 应用)这样的确可以保持全屏

又测试了下,不完全是pushState的问题,iframe加载页面也会导致退出全屏。用了这个方法可以全屏:
https://segmentfault.com/q/10...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏