监听H5的横竖屏

真正想要H5强制竖屏，兼容性上是比较难处理的，然而可以通过别的方式达到类似的效果；

1、检测H5横竖屏

2、检测到横屏时，给出提示，并隐藏页面元素（引导用户竖屏）

使用案例：

import { Dialog } from 'vant'
import ListenPortraitLandscape from 'ListenPortraitLandscape.js'
 
//启动监听
const listen = ListenPortraitLandscape(
  () => {
    Dialog.confirm({
      title: '提示',
      message: '为了更好的观看体验，请您保持竖屏或全屏观看',
      className: 'doc-dialog'
    })
    const elm = document.getElementsByClassName('mast-portrait')[0]
    elm.style.visibility = 'hidden'
  },
  () => {
    const elm = document.getElementsByClassName('mast-portrait')[0]
    elm.style.visibility = 'unset'
    Dialog.close()
  }
)
 
//取消监听
listen.remove()

话不多说，直接上检测代码

/**
 * 横竖屏检测
 * @param {*} portraitCallback 横屏时回调
 * @param {*} landscapeCallback 竖屏时回调
 * @returns { remove: 取消监听方法 } 在不需要监听时调用此方法
 */
const ListenPortraitLandscape = function (portraitCallback, landscapeCallback) {
  let _portraitCallback = portraitCallback || function() {}
  let _landscapeCallback = landscapeCallback || function() {}
 
  let renderTimeout = null
  let MatchMedia = null
 
  // 向下兼容方案
  const resizeCallback = () => {
    clearTimeout(renderTimeout)
    renderTimeout = setTimeout(() => {
      if (window.innerHeight / window.innerWidth < 0.67) _portraitCallback()
      else _landscapeCallback()
    }, 0)
  }
 
  // 现代标准方案
  const mediaCallback = mql => {
    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)
    }
  }
}


export default ListenPortraitLandscape;