ReactJS与CSS实现iPhone刘海屏背景全覆盖问题

步骤1：修正meta标签的位置 #

你把viewport-fit=cover的meta标签放在<div>里是无效的，这个标签必须放在HTML的<head>标签内：

• 如果是Create React App项目，直接修改public/index.html，在<head>中添加：

<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />

步骤2：重置全局样式 #

在全局CSS中添加以下代码，清除html和body的默认边距，避免出现留白：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

步骤3：修改渐变背景样式 #

用固定定位代替height:100vh，确保背景铺满整个屏幕（包括刘海区域）：

.gradient-background {
  background: linear-gradient(245deg,#F029C4,#FF0265);
  background-size: 180% 180%;
  animation: gradient-animation 3s ease infinite;
  /* 固定定位铺满整个视口 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

/* 补全渐变动画的定义 */
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

步骤4：修正React组件的属性错误 #

React中元素的类名应该只用className，不要混用原生的class属性：

class App extends React.Component{
  render(){
    return(
      <div className="app gradient-background">
        <InitialPage />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

这样设置后，背景会完全覆盖包括刘海在内的整个屏幕区域，viewport-fit=cover让浏览器视口扩展到屏幕边缘，固定定位确保背景元素铺满所有可视区域。

内容的提问来源于stack exchange，提问作者Micheal S. Bingham