React PWA中基于设备类型实现内容差异化渲染

npm install react-device-detect
# 或者
yarn add react-device-detect

import React from 'react';
import { isMobile, isBrowser, isTablet } from 'react-device-detect';

function DeviceContentRenderer() {
  if (isMobile) {
    // 渲染移动设备专属内容
    return (
      <div className="mobile-only-content">
        <h2>移动设备专属内容</h2>
        <p>这是为手机等移动设备优化显示的内容，界面更简洁，操作更便捷。</p>
        <button>查看移动版功能</button>
      </div>
    );
  } else if (isTablet) {
    // 渲染平板设备专属内容
    return (
      <div className="tablet-only-content">
        <h2>平板设备专属内容</h2>
        <p>此内容专为平板设备设计，可提供更宽广的视图和触控优化。</p>
      </div>
    );
  } else if (isBrowser) {
    // 渲染桌面浏览器专属内容
    return (
      <div className="desktop-only-content">
        <h2>桌面浏览器专属内容</h2>
        <p>这是为桌面电脑浏览器设计和展示的丰富内容，通常包含更多细节和复杂交互。</p>
        <ul>
          <li>复杂的数据表格</li>
          <li>多窗口操作界面</li>
          <li>高级编辑工具</li>
        </ul>
      </div>
    );
  } else {
    // 默认内容或无法识别设备类型时的回退
    return (
      <div className="default-content">
        <h2>通用内容</h2>
        <p>此内容在所有设备上均可访问。</p>
      </div>
    );
  }
}

export default DeviceContentRenderer;

import React, { useState, useEffect } from 'react';

// 辅助函数：防抖
const debounce = (func, delay) => {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
};

function ManualDeviceContentRenderer() {
  // 定义一个状态来存储是否为移动设备
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // 定义判断函数
    const checkIsMobile = () => {
      // 您可以根据实际需求定义移动设备的屏幕宽度阈值
      // 常见的移动设备最大宽度为767px或991px。这里以768px为例。
      setIsMobile(window.innerWidth < 768);
    };

    // 组件挂载时执行一次判断，设置初始状态
    checkIsMobile();

    // 监听窗口尺寸变化事件，并进行防抖处理
    const debouncedCheck = debounce(checkIsMobile, 150); // 150ms 防抖延迟
    window.addEventListener('resize', debouncedCheck);

    // 组件卸载时清理事件监听器，防止内存泄漏
    return () => {
      window.removeEventListener('resize', debouncedCheck);
    };
  }, []); // 空依赖数组表示此Effect只在组件挂载和卸载时运行

  if (isMobile) {
    return (
      <div className="mobile-only-content">
        <h2>移动设备专属内容 (手动判断)</h2>
        <p>此内容根据屏幕宽度小于768px进行展示。</p>
        <p>当前屏幕宽度: {window.innerWidth}px</p>
      </div>
    );
  } else {
    return (
      <div className="desktop-only-content">
        <h2>桌面浏览器专属内容 (手动判断)</h2>
        <p>此内容根据屏幕宽度大于等于768px进行展示。</p>
        <p>当前屏幕宽度: {window.innerWidth}px</p>
      </div>
    );
  }
}

export default ManualDeviceContentRenderer;