如何仅在iOS设备上设置React页面底部导航栏滚动时的高度？

针对React项目中iOS设备上底部固定导航栏滚动时出现的移位、高度变化问题，可以通过以下步骤解决：

1. 识别iOS设备并添加专属类 #

在React组件中通过用户代理（UA）判断设备是否为iOS，给页面body添加专属类名，方便后续编写针对性CSS：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    if (isIOS) {
      document.body.classList.add('ios-device');
    }
    // 组件卸载时移除类名
    return () => {
      document.body.classList.remove('ios-device');
    };
  }, []);

  return (
    // 你的组件内容，包含.navbar-footer
  );
};

2. 修改CSS适配iOS设备 #

基于添加的ios-device类，调整导航栏的定位和高度，适配iOS的安全区域和滚动时的视口变化：

.navbar-footer {
  display: none;
  position: fixed;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 65px;
  background-color: #fff;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* iOS设备专属样式 */
.ios-device .navbar-footer {
  /* 保留基础高度，同时适配底部安全区 */
  height: calc(65px + env(safe-area-inset-bottom));
  /* 调整bottom值，避免被系统底部栏遮挡 */
  bottom: env(safe-area-inset-bottom);
  /* 设置最小高度，防止滚动时高度被挤压 */
  min-height: 65px;
}

额外优化：处理滚动时视口变化 #

iOS Safari滚动时会隐藏地址栏，导致视口高度变化，可通过监听resize事件确保导航栏高度稳定：

useEffect(() => {
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  const handleResize = () => {
    const navbar = document.querySelector('.navbar-footer');
    if (navbar && isIOS) {
      navbar.style.height = `calc(65px + ${window.safeAreaInsets?.bottom || 0}px)`;
    }
  };

  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

内容的提问来源于stack exchange，提问作者Idan Ben Eliyaho