微信浏览器中的全屏异常、应用切换异常问题探究

现象

在微信浏览器中，有两种情况容易引发异常：

1、微信浏览器中某一个元素处于全屏时，这时微信出现弹窗；2、微信浏览器某一个元素处于全屏时，切换到其他应用，微信后台运行一段时间再切回来；

这时我们的页面将处于一个异常状态，既非全屏也非退出全屏状态，页面的退出全屏操作将失效，无法使网页恢复到初始状态，除非刷新微信浏览器，严重影响用户体验。

注意：笔者所说的两种现象均是在iframe嵌套的内部网页中出现，猜测在非iframe的情况下也会引发，但尚未核实，如有误，欢迎指出。

难点探究

这两种情况都有一个共同的特点：

1、异常状态使得我们的全屏逻辑完全不起作用。2、这种状态是由于微信的机制导致，而微信没有提供相关api供我们调用。
因此我们基于浏览器的操作是完全不起作用的。

笔者在探究的基础上总结了一些结论，可供参考，现分享如下。

解决思路

1.避免在全屏时引发弹窗，如果业务逻辑不可改，那么就先退出全屏再触发弹窗。
一个明显的例子是，假如我们在某个元素全屏的状况下，查询设备是否支持摄像头，将导致微信询问是否允许开启摄像头，这时引发页面异常。可采用的解决方案是：先退出全屏，而后查询设备是否支持摄像头。
2.在全屏时切换到微信之外的其他应用引发的页面异常问题，可采用H5的visibilitychange事件使页面重新加载来解决。
visibilitychange事件的作用是，在浏览器标签页被隐藏或显示的时候触发。经核实，在切换微信浏览器时也会触发该事件。

document.addEventListener("visibilitychange", function() {const state = document.visibilityState;if(state === 'visible'){window.location.reload();}
});

微信浏览器中的全屏异常、应用切换异常问题探究相关推荐

iphone的safari浏览器中实现全屏浏览的方法
正常情况下,当你用手机浏览器打开网页时,导航就停留在上面,这样实际展示的屏幕就变小了. 那能不能加载后,屏幕就自动全屏呢?这就是本文要讨论的. Add to Home Screen 说到全屏不得不谈i ...
微信浏览器中控制视频的播放
需求:官网的视频要在微信浏览器中播放,由于微信浏览器不支持自动播放,所以只能手动设置 <div class="globel_view" style="positio ...
360浏览器怎么关闭全屏看大图提示条
核心提示: 当我们用360安全浏览器查看含有多张大图的页面时,会显示全屏看大图提示条.其实很多时候我们都用不着这个功能,那么,360安全浏览器怎么关闭全屏看大图提示条呢?下面让我来给大家介绍下吧. 3 ...
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放关键代码 webkit-playsinline='true' playsinline= ...
wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
微信浏览器中进行支付宝支付
B端项目使用的是支付宝手机网页支付,微信浏览器中屏蔽了支付宝的功能.上有政策下有对策,支付宝也有应对的办法,下来就来说一说支付宝手机网站支付. 第一步:开发准备工作登录支付宝平台(需要实名认证的支付 ...
家用电脑设置成小程序服务器,电脑微信小程序设置全屏的方法是什么
电脑微信小程序设置全屏的方法是什么方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便 ...
android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的再是模仿的先说下实现原理,再一步步分析这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
Vue项目在微信浏览器中使用支付宝支付
本人vue 小白之前在公司接触vue商城项目,其中包含了微信支付和支付宝支付,由于微信会拦截支付宝支付页面.当时这个问题困惑我蛮久的,所以今天记录一下,方便日后再次遇到方便查询. 废话不多说. 给兄 ...

微信浏览器中的全屏异常、应用切换异常问题探究

现象

难点探究

解决思路

微信浏览器中的全屏异常、应用切换异常问题探究相关推荐

最新文章

热门文章