【两端同码】判断移动端还是PC端超级好用的方法

最新推荐文章于 2024-11-12 08:45:00 发布

前端小峰

最新推荐文章于 2024-11-12 08:45:00 发布

阅读量335

点赞数

分类专栏：前端技术文章标签： javascript 前端 ui

本文链接：https://blog.youkuaiyun.com/Shaoyouiqng/article/details/121039676

版权

前端技术专栏收录该内容

39 篇文章

订阅专栏

该博客介绍了一个React组件，它使用JavaScript的媒体查询判断设备是横屏还是竖屏，并根据屏幕尺寸和方向动态调整UI模式。当屏幕尺寸变化时，组件会监听并更新状态，以适配PC或移动设备。示例中展示了如何装饰组件以自动获取和应用当前的UI模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 源码实例
import React from 'react' 
// JavaScript 的媒体查询 
const mqlMedia = window.matchMedia('(orientation: portrait)')

function onMatchMediaChange(mql = window.matchMedia('(orientation: portrait)')) { 
  if (mql.matches) { 
    //竖屏 
    return 'portrait' 
  } else { 
    //横屏 
    return 'horizontal' 
  } 
} 
// 输出当前屏幕模式 
const getUiMode = (uiMode = '', mql) => { 
  if (uiMode) return uiMode 
  if (!('onorientationchange' in window)) return 'pc' 
  let status = onMatchMediaChange(mql) 
  let width = status === 'portrait' ? Math.min(window.innerWidth, window.innerHeight) : Math.max(window.innerWidth, window.innerHeight) 
  if (width > 1040) return 'pc' 
  return 'mobile' 
} 
const getIsPcMode = (uiMode) => uiMode === 'pc' 
/** 
 * UI 模式，判断逻辑 
 * @export 
 * @param {*} Cmp 
 * @returns 
 */ 
export function withUiMode(Cmp, options = {}) { 
  return class WithUIRem extends React.Component { 
    constructor(props) { 
      super(props) 
      let uiMode = getUiMode() 
      let isPCMode = getIsPcMode(uiMode) 
      this.state = { 
        uiMode: uiMode, 
        isPCMode: isPCMode, 
      } 
    } 
    // 横竖屏切换监听 
    componentDidMount() { 
      mqlMedia.addListener(this.changeUiMode) 
    } 
    componentWillUnmount() { 
      mqlMedia.removeListener(this.changeUiMode) 
    } 
    changeUiMode = (mql) => { 
      let newUiMode = getUiMode('', mql) 
      if (newUiMode !== this.state.uiMode) { 
        this.setState({ 
          isPCMode: getIsPcMode(newUiMode), 
          uiMode: newUiMode 
        }) 
      } 
    } 
    render() { 
      return <Cmp {...this.state} {...this.props} /> 
    } 
  } 
} 
export default (options) => { 
  return (Cmp) =>  withUiMode(Cmp, options) 
}

// 调用方法

// 装饰器的方式来使用 
@withUiMode() 
export default class Video extends React.Component { 
  render() { 
    const { isPCMode, uiMode } = this.props 
    return ( 
      <Page isPCMode={isPCMode}></Page> 
    ) 
  } 
}