iPad Safari浏览器中React设备识别Hook失效问题求助

原Hook在iPad Safari中失效的核心原因是iPadOS 13及以上版本的Safari会伪装成Mac的用户代理（User Agent），导致原有的navigator.userAgent和navigator.platform检测无法命中。以下是修复后的完整Hook代码：

import { useState, useEffect } from "react";

import { LANDSCAPE, PORTRAIT } from "../constants";

const useIPadOrientation = () => {
  const [isIPad, setIsIPad] = useState(false);
  const [screenDimensionOrientation, setScreenDimensionOrientation] =
    useState("");

  useEffect(() => {
    const updateDevice = () => {
      // 适配全场景的iPad检测逻辑
      const isAnIpad = 
        // 兼容旧版本iPad/非Safari浏览器的传统检测
        (!!navigator?.userAgent?.match(/iPad/i) || !!/iPad/.test(navigator?.platform)) ||
        // iPadOS 13+ Safari专属检测：伪装成Mac但具备触摸能力+平板级屏幕
        (navigator?.platform === 'MacIntel' && navigator?.maxTouchPoints > 1 && window?.innerWidth >= 768);

      setIsIPad(isAnIpad);
    };

    const updateOrientation = () => {
      setScreenDimensionOrientation(
        window?.innerWidth > window?.innerHeight ? LANDSCAPE : PORTRAIT
      );
    };

    updateDevice();
    updateOrientation();
    window?.addEventListener("orientationchange", updateOrientation);
    window?.addEventListener("resize", updateDevice);

    const mediaQuery = window?.matchMedia("(orientation: portrait)");
    mediaQuery?.addEventListener("change", updateOrientation);

    return () => {
      window?.removeEventListener("orientationchange", updateOrientation);
      window?.removeEventListener("resize", updateDevice);
      mediaQuery?.removeEventListener("change", updateOrientation);
    };
  }, []);

  return { isIPad, screenDimensionOrientation };
};

export default useIPadOrientation;

关键修复说明： #

• 新增iPadOS 13+ Safari适配逻辑：iPadOS 13之后的Safari会将navigator.platform设为MacIntel，但这类设备同时具备触摸能力（navigator.maxTouchPoints > 1）且屏幕尺寸符合平板标准（innerWidth >= 768），通过组合这几个条件可准确识别。
• 保留原有检测逻辑：兼容旧版本iPad系统和Chrome等其他浏览器的识别方式，确保原有正常场景不受影响。
• 简化状态赋值：直接用setIsIPad(isAnIpad)替代冗余的if-else判断，代码更简洁高效。

可选优化： #

如果需要进一步提升识别准确性，可以添加媒体查询作为辅助判断：

// 在updateDevice函数内添加
const isTabletMedia = window?.matchMedia('(min-width: 768px) and (max-width: 1024px) and (hover: none) and (pointer: coarse)').matches;
// 将其加入isAnIpad的判断条件中

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