移动端横屏检测实验
大约 2 分钟
移动端横屏检测实验
因为最近在做毕业设置所以很久没有写文章了,等毕业设计完成之后,会加快文章的评率和进度
使用 css+媒体查询
css 检测横屏
<div class="orientation-wrapper"></div>
.orientation-wrapper {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.6);
position: relative;
}
@media screen and (orientation: landscape) {
.orientation-wrapper::after {
content: '我横屏了';
display: flex;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
}
}
弊端
使用媒体查询检测横屏竖屏的时候无法检测设备类型,也就是说无法知道当前设备是 pc 端还是移动端,如果要实现 pc 端不检测 移动端检测则需要编写额外的 js 逻辑,有较大的心智负担 😨
使用 js + media
js 检测横屏
<template>
<div class="orientation-wrapper">{{ str }}</div>
</template>
<!-- 学习移动端横屏显示 -->
<script>
const { ref,onUnmounted,onMounted } = Vue;
export default {
setup() {
const str = ref('nihao ')
const isMobile = () => {
const ua = navigator.userAgent.toLowerCase()
const isMobile =
/phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|mqqbrowser|juc|fennec|wosbrowser|browserng|webos|symbian|windows phone/.test(
ua
)
return isMobile
}
const ListenPortraitLandscape = function (
portraitCallback,
landscapeCallback
) {
let _portraitCallback = portraitCallback || function () {}
let _landscapeCallback = landscapeCallback || function () {}
let renderTimeout
let MatchMedia
// 向下兼容方案
const resizeCallback = () => {
clearTimeout(renderTimeout)
renderTimeout = setTimeout(() => {
if (window.innerHeight / window.innerWidth < 0.67) _portraitCallback()
else _landscapeCallback()
}, 0)
}
// 现代标准方案
const mediaCallback = (mql) => {
if (!isMobile()) return
if (mql?.matches) _portraitCallback()
else _landscapeCallback()
}
// 监听入口 (因为window.matchMedia方式在实际项目中,检测时个别机型存在支持但无响应问题,所以慎用此方式!)
if (window.matchMedia) {
MatchMedia = window.matchMedia('(orientation: landscape)')
mediaCallback(MatchMedia)
MatchMedia.addEventListener('change', mediaCallback)
} else {
window.addEventListener('resize', resizeCallback, false)
}
return {
// 移除监听
remove: () => {
if (MatchMedia) MatchMedia.removeEventListener('change', mediaCallback)
else window.removeEventListener('resize', resizeCallback)
},
}
}
let listen
onMounted(() => {
listen = ListenPortraitLandscape(
() => {
str.value = '为了更好的观看体验,请您保持竖屏或全屏观看'
console.log('为了更好的观看体验,请您保持竖屏或全屏观看');
},
() => {
str.value = '请继续。。。'
}
)
})
onUnmounted(() => {
if (!listen) return
// 移除
listen.remove()
})
return {str}
},
};
</script>