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
  }

}

在需要轉換的界面進行監聽

• 收到通知進行處理。