H5移动端横竖屏切换

阅读目录

• 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
  }

}

回到顶部

在需要转换的界面进行监听

• 收到通知进行处理。