React PWA中实现移动端与桌面端内容差异化渲染指南

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

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

function App() {
  const renderContent = () => {
    if (isMobile) {
      // 移动端专属内容
      return (
        <div>
          <h1>欢迎来到移动端体验！</h1>
          <p>这是为手机用户优化过的界面和功能。</p>
          {/* 更多移动端组件 */}
        </div>
      );
    } else {
      // 桌面端专属内容
      return (
        <div>
          <h2>欢迎来到桌面端体验！</h2>
          <p>这是为大屏幕用户设计的丰富内容。</p>
          {/* 更多桌面端组件 */}
        </div>
      );
    }
    // 如果有内容在两种设备上都显示，可以放在这里
    // return <div>...内容在两种设备上都显示...</div>;
  };

  return (
    <div className="app-container">
      {renderContent()}
    </div>
  );
}

export default App;

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

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

  useEffect(() => {
    // 定义一个函数来更新 isMobileView 状态
    const handleResize = () => {
      // 根据屏幕宽度设置阈值，例如768px作为移动端和桌面端的分界线
      setIsMobileView(window.innerWidth <= 768);
    };

    // 组件挂载时立即执行一次，以设置初始状态
    handleResize();

    // 添加窗口尺寸变化的事件监听器
    window.addEventListener('resize', handleResize);

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

  const renderContent = () => {
    if (isMobileView) {
      // 移动端专属内容
      return (
        <div>
          <h3>这是通过自定义逻辑渲染的移动端内容</h3>
          <p>屏幕宽度小于等于768px时显示。</p>
        </div>
      );
    } else {
      // 桌面端专属内容
      return (
        <div>
          <h4>这是通过自定义逻辑渲染的桌面端内容</h4>
          <p>屏幕宽度大于768px时显示。</p>
        </div>
      );
    }
  };

  return (
    <div className="app-wrapper">
      {renderContent()}
    </div>
  );
}

export default App;