iPhone Chrome底部灰色栏遮挡ReactJS应用按钮问题求助

• 适配iOS安全区域
  利用CSS的env(safe-area-inset-bottom)属性为底部元素预留空间，避免被系统栏遮挡。比如给底部工具栏添加内边距：

  .bottom-action-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  

• 修正viewport设置
  确保HTML的viewport标签包含viewport-fit=cover，让页面能延伸到安全区域外，配合安全区域属性生效：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

• 调整固定定位元素
  对于固定在底部的按钮/导航，不要直接设置bottom: 0，改用env(safe-area-inset-bottom)作为bottom值或底部外边距：

  .fixed-bottom-btn {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    margin: 0 16px;
  }
  

• Material UI 全局适配
  通过ThemeProvider给MUI组件统一添加安全区域适配，以BottomNavigation为例：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  
  const theme = createTheme({
    components: {
      MuiBottomNavigation: {
        styleOverrides: {
          root: {
            paddingBottom: 'env(safe-area-inset-bottom)',
          },
        },
      },
    },
  });
  
  // 在根组件中包裹ThemeProvider
  function App() {
    return <ThemeProvider theme={theme}>{/* 页面内容 */}</ThemeProvider>;
  }
  

内容的提问来源于stack exchange，提问作者Ninja-aman