OPPO手机默认浏览器前端无法监听横竖屏切换

最新推荐文章于 2023-11-20 08:00:35 发布

汤卓杰

最新推荐文章于 2023-11-20 08:00:35 发布

阅读量331

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/tang31415926/article/details/132858645

版权

OPPO手机和VIVO手机bug经常一致

OPPO手机有时无法检测到横屏，应该是无法监听onorientationchange

const ua = navigator.userAgent.toLowerCase();
const isOppoBrowser = ua.indexOf('HeyTapBrowser'.toLowerCase()) !== -1 // oppo自带浏览器UA

const orientationEvent = 'onorientationchange' in window && !isOppoBrowser ? 'orientationchange' : 'resize'

window.addEventListener(orientationEvent, e => {
    let w = document.documentElement.clientWidth
    let h = document.documentElement.clientHeight
    // 用宽高比判断屏幕方向
    if (w > h) {
        // 横屏
    } else {
        // 竖屏
    }
}, false)

另外在<head>里，设置以下内容，腾讯X5浏览器中的方向强制竖屏（横屏是content="landscape"）,而OPPO手机内置浏览器也会触发

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

某OPPO手机浏览器,打印navigator.userAgent如下，也没有前面所说的包含HeyTapBrowser，也没有表示腾讯X5的相关字样 “TBS” 或 “X5”。也就是说判断方法存疑

Mozilla/5.0(Linux;Android 13; PFTM10Build/TP1A.220905.001; wv) AppleWebKit/537.36(KHTML.like Gecko) Version/4.0 Chrome/111.0.5563.116Mobile Safari/537.36 XWEB5261MMWEBSDK/20230701MMWEBID/2978 MicroMessenger)8.0.40.2420(0x28002858)Wechatarm64 Weixin NetType/WIFI Language/zh CNABI/arm64)