H5移动端横竖屏切换
H5移动端横竖屏切换
- 监听设备信息进行切换
import Vue from 'vue'
const EventBus = new Vue()
export default EventBus
import EventBus from './EventBus'
import Vue from 'vue'
export function addScreenRotateListen() {
const mql = window.matchMedia('(orientation: portrait)')
function onMatchMeidaChange(mql) {
if (mql.matches) {
// 竖屏
console.log('竖屏')
EventBus.$emit('screenRotated', 'portrait')
} else {
// 横屏
console.log('横屏')
EventBus.$emit('screenRotated', 'landscape')
}
}
onMatchMeidaChange(mql)
mql.addListener(onMatchMeidaChange)
}
Vue.prototype.DevicePortraited = () => {
const mql = window.matchMedia('(orientation: portrait)')
if (mql.matches) {
// console.log('DevicePortraited 竖屏')
return true
} else {
// console.log('DevicePortraited 横屏')
return false
}
}
在需要转换的界面进行监听
- 收到通知进行处理。
本文来自博客园,作者:struggle_time,转载请注明原文链接:https://www.cnblogs.com/songliquan/p/12784587.html