React渐进式Web应用中基于设备类型的内容适配策略

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

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

function AppContent() {
  const renderDeviceSpecificContent = () => {
    if (isMobile) {
      // 移动端专属内容
      return (
        <div style={{ padding: '20px', border: '1px solid #4CAF50', borderRadius: '8px', backgroundColor: '#e8f5e9' }}>
          <h2>移动端专属内容</h2>
          <p>此部分内容已针对移动设备屏幕和交互进行优化。例如，您可以加载移动端特定的组件或数据。</p>
          <ul>
            <li>触摸友好的导航</li>
            <li>优化的小尺寸图片</li>
            <li>精简的布局</li>
          </ul>
        </div>
      );
    } else if (isBrowser) {
      // 桌面端专属内容
      return (
        <div style={{ padding: '20px', border: '1px solid #2196F3', borderRadius: '8px', backgroundColor: '#e3f2fd' }}>
          <h2>桌面端专属内容</h2>
          <p>此部分内容专为桌面浏览器设计，可以展示更丰富的信息和更复杂的交互。</p>
          <ul>
            <li>宽屏布局</li>
            <li>鼠标悬停效果</li>
            <li>高分辨率媒体内容</li>
          </ul>
        </div>
      );
    }
    // 默认内容，适用于无法明确判断设备类型的情况（例如某些平板设备）
    return (
      <div style={{ padding: '20px', border: '1px solid #FFC107', borderRadius: '8px', backgroundColor: '#fffde7' }}>
        <h2>通用内容</h2>
        <p>此内容适用于所有设备类型，作为备用或通用展示。</p>
      </div>
    );
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '960px', margin: '20px auto', padding: '15px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
      <h1>React PWA 设备内容适配示例</h1>
      {renderDeviceSpecificContent()}
      <hr style={{ margin: '20px 0' }}/>
      <p>无论设备类型如何，这段文本都会显示在页面上。</p>
    </div>
  );
}

export default AppContent;

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

function AppContentCustom() {
  // 定义移动设备的宽度阈值（例如，小于768px认为是移动设备）
  const MOBILE_BREAKPOINT = 768; 

  // 使用state来存储当前是否为移动设备的状态
  const [isMobile, setIsMobile] = useState(window.innerWidth < MOBILE_BREAKPOINT);

  useEffect(() => {
    // 检查当前窗口宽度是否小于移动设备断点
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    };

    // 监听窗口大小变化事件
    window.addEventListener('resize', checkIsMobile);

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

  const renderDeviceSpecificContent = () => {
    if (isMobile) {
      // 移动端专属内容
      return (
        <div style={{ padding: '20px', border: '1px solid #F44336', borderRadius: '8px', backgroundColor: '#ffebee' }}>
          <h2>自定义移动端内容</h2>
          <p>此内容根据屏幕宽度小于 {MOBILE_BREAKPOINT}px 来显示。</p>
          <p>适用于需要精确控制响应式断点的场景。</p>
        </div>
      );
    } else {
      // 桌面端专属内容
      return (
        <div style={{ padding: '20px', border: '1px solid #9C27B0', borderRadius: '8px', backgroundColor: '#f3e5f5' }}>
          <h2>自定义桌面端内容</h2>
          <p>此内容根据屏幕宽度大于等于 {MOBILE_BREAKPOINT}px 来显示。</p>
          <p>您可以自由定义不同断点来适配多种设备尺寸。</p>
        </div>
      );
    }
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '960px', margin: '20px auto', padding: '15px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }}>
      <h1>React PWA 自定义屏幕尺寸适配示例</h1>
      {renderDeviceSpecificContent()}
      <hr style={{ margin: '20px 0' }}/>
      <p>无论屏幕尺寸如何，这段文本都会显示在页面上。</p>
    </div>
  );
}

export default AppContentCustom;