React导航栏iOS端文本裁剪、溢出问题排查与修复求助

问题背景 #

我使用React和React-router构建静态网站，开发了一个带有全站路由的导航栏组件。相关代码如下：

导航栏组件代码 #

import React from 'react';
import './navigation.css';
import { Link } from "react-router-dom";

function NavigationBar() {
    return (
        <div className='TopBar'>
            <Link to="/" >
                <button className='Buttons'>
                    Home
                </button>
            </Link>
            <Link to='/career'>
                <button className='Buttons'>
                    Career
                </button>
            </Link>
            <Link to='/projects'>
                <button className='Buttons'>
                    Projects
                </button>
            </Link>
            <Link to='/blog'>
                <button className='Buttons'>
                    Blog
                </button>
            </Link>
        </div>
    );
  }
  
  export default NavigationBar;

导航栏CSS样式 #

.TopBar {
    width: auto;
    width: -webkit-fill-available;
    height: 100px;
    background-color: #0047AB;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    justify-content: space-evenly;
    display: flex;
}

.Buttons {
    background-color: #0047AB;
    color: white;
    max-width: 13%;
    width: auto;
    height: 100%;
    font-weight: bolder;
    font-size: x-large;
    border-width: 0px;
    font-family: 'helvetica';
    margin: auto;
    float: left;
}

.Buttons:hover {
    text-decoration: underline;
    font-size: x-large;
}

App.js中调用导航栏及对应CSS #

<header  className="App-header">
  <NavigationBar/>
</header>

.App-header {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: top;
  font-size: calc(10px + 2vmin);
  color: white;
}

网站部署到Github Pages后，安卓及PC端表现正常，但苹果设备上出现按钮文本被裁剪、导航栏溢出屏幕的问题。已尝试给导航栏div添加width: -webkit-fill-available样式，以及在index.html中添加<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />元标签，但问题未解决。

问题分析与修复方案 #

这不是React在iOS上的Bug，是CSS布局的细节适配问题导致的，以下是具体问题点和修复方法：

1. 按钮宽度限制不合理 #

.Buttons设置的max-width:13%在iOS Safari中宽度计算逻辑和其他浏览器有差异，13%的宽度不足以容纳"Projects"这类较长文本，直接引发文本裁剪。

• 修复：移除max-width:13%，添加min-width保证文本不被截断，同时用flex布局让按钮内容居中：

  .Buttons {
    /* 移除max-width:13% */
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

2. Flex容器宽度冲突 #

.TopBar同时设置width:auto和width:-webkit-fill-available，iOS下这两个属性的优先级处理异常，导致容器宽度计算错误。

• 修复：统一设置宽度为100%，并添加box-sizing: border-box防止容器因内边距/边框超出屏幕：

  .TopBar {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px; /* 增加左右内边距，避免按钮贴边 */
    /* 移除width:auto和width:-webkit-fill-available */
  }
  

3. 外层header布局冗余 #

.App-header的flex-direction:column和align-items:top会干扰导航栏的宽度计算，完全没必要保留。

• 修复：简化.App-header样式：

  .App-header {
    height: 100px;
    width: 100%;
    box-sizing: border-box;
  }
  

4. 字体大小缺乏自适应 #

font-size:x-large在iOS小屏设备上尺寸过大，容易导致文本溢出。

• 修复：使用clamp()函数实现字体自适应，兼顾大屏和小屏显示：

  .Buttons {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
  }
  

修改后的完整导航栏CSS #

.TopBar {
  width: 100%;
  box-sizing: border-box;
  height: 100px;
  background-color: #0047AB;
  align-items: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  justify-content: space-evenly;
  display: flex;
  padding: 0 10px;
}

.Buttons {
  background-color: #0047AB;
  color: white;
  width: auto;
  min-width: 80px;
  height: 100%;
  font-weight: bolder;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  border-width: 0px;
  font-family: 'helvetica';
  display: flex;
  align-items: center;
  justify-content: center;
}

.Buttons:hover {
  text-decoration: underline;
}

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