如何根据设备浏览器类型正确实现React/Next.js组件显隐

纯靠userAgent做设备识别天生有缺陷：iPad、安卓平板等设备开启浏览器桌面模式时，会主动重写UA字段完全伪装成桌面端特征，原有正则规则必然出现识别误差。
准确识别不能依赖单一规则，需要结合多点触控硬件能力、平台标识、UA特征三个维度交叉判断，核心是用硬件特征补全UA伪装的盲区：真实桌面端设备即使搭配触控板，navigator.maxTouchPoints值通常为0或1，而手机、平板这类原生触控设备的该值普遍≥2，刚好可以识别出伪装成桌面端的平板设备。

这个实现兼容iPad桌面Safari、安卓平板桌面模式的识别场景，同时适配Next.js服务端渲染逻辑，不会在SSR阶段报错：

const getDeviceType = () => {
  // SSR环境下默认返回桌面端，避免服务端访问window报错
  if (typeof window === 'undefined') return 'desktop';
  const ua = navigator.userAgent;
  const platform = navigator.platform || navigator.userAgentData?.platform || '';
  const maxTouchPoints = navigator.maxTouchPoints || 0;

  // 平板识别：覆盖原生平板UA + iPad开桌面模式伪装Mac的场景
  const isTabletUA = /(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua);
  const isIpadDesktopMode = /Mac/i.test(platform) && maxTouchPoints > 1;
  if (isTabletUA || isIpadDesktopMode) return 'tablet';

  // 移动端识别：覆盖原生手机UA + 安卓开桌面模式伪装的场景
  const isMobileUA = /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua);
  const isAndroidDesktopMode = /Android/i.test(ua) && maxTouchPoints > 1 && !/Mobile/i.test(ua);
  if (isMobileUA || isAndroidDesktopMode) return 'mobile';

  return 'desktop';
};

注意Next.js存在服务端渲染阶段，首屏没有window/navigator对象，需要在客户端hydration完成后再获取设备类型，避免水合不匹配错误：

// Next.js App Router 下需要标记为客户端组件
'use client';
import { useEffect, useState } from 'react';

export default function OperationTip() {
  // 初始给默认值，避免SSR和客户端首屏渲染不一致报错
  const [deviceType, setDeviceType] = useState('desktop');

  useEffect(() => {
    // 客户端挂载后再获取真实设备类型
    setDeviceType(getDeviceType());
    // 可选：监听设备变化（比如外接键盘、横竖屏切换）更新类型
    const updateDeviceType = () => setDeviceType(getDeviceType());
    window.addEventListener('resize', updateDeviceType);
    return () => window.removeEventListener('resize', updateDeviceType);
  }, []);

  return (
    <>
      {/* 仅桌面端显示键盘操作相关组件 */}
      {deviceType === 'desktop' && (
        <div className="text-sm text-gray-500">按Tab键可快速切换聚焦元素</div>
      )}
      {/* 平板、移动端显示触控适配提示 */}
      {['tablet', 'mobile'].includes(deviceType) && (
        <div className="text-sm text-gray-500">点击元素即可选中操作</div>
      )}
    </>
  );
}

• 这套判断逻辑完全基于设备硬件特征和系统标识实现，不依赖屏幕宽度断点，不属于响应式尺寸适配范畴，符合区分键盘操作支持能力的需求。
• 如果需要覆盖「平板外接物理键盘」的特殊场景，可以额外补充键盘检测逻辑，或者给用户提供手动切换操作模式的入口即可。

内容的提问来源于stack exchange，提问作者user3226932