问答

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

作者:admin 2021-04-18 我要评论

我正在做一个单页面手机网站,用到了pushState 主页面index.html 全屏meta设置: meta name="full-screen" content="yes"/meta name="browsermode" content="app...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

我正在做一个单页面手机网站,用到了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 和应用状态。

这两个办法看不懂,求解

###

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

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器