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
  }

}

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

  • 收到通知进行处理。
posted @ 2019-07-16 15:40  struggle_time  阅读(2497)  评论(0编辑  收藏  举报