兄弟我太懂这种真实设备和模拟器不一致的崩溃感了！尤其是iOS Safari的布局引擎经常搞这种“模拟器好好的，真机就翻车”的操作。我帮你分析下问题核心，再给几个亲测有效的修复方案：

问题核心原因 #

1. iOS Safari对height: stretch的兼容性问题：你在.card > div里用了height: stretch，这个属性在Chrome模拟器里正常，但真实iOS设备的Safari对它的支持并不完善，导致卡片内部容器没有正确撑开高度，内容被overflow:hidden直接截断。
2. 多层position:relative的布局混乱：你给.highlights、.card、.card > div都加了position:relative，多层嵌套的相对定位会让Safari的布局引擎计算逻辑混乱，无法正确识别容器的内在高度。
3. 大值padding触发的视口计算bug：#about的5rem 0 padding结合.highlights的3rem 0 padding，在iOS的视口高度计算中可能触发了溢出判定，导致容器高度被错误压缩。

针对性修复方案 #

方案1：替换height: stretch为height: 100%（最直接有效） #

把兼容性有问题的stretch换成通用的100%，同时确保父容器的高度能向下传递：

.card {
  background-color: rgb(30, 30, 30);
  padding: 1px;
  border-radius: 10px;
  height: 100%; /* 新增：让卡片继承网格项的高度 */
}

.card > div {
  position: relative;
  background-color: black;
  border-radius: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%; /* 替换height: stretch为100% */
}

方案2：给容器添加min-height: fit-content兜底 #

确保父容器能自适应内容高度，避免padding导致的高度压缩：

#about {
  padding: 5rem 0;
  min-height: fit-content; /* 新增：强制容器撑开内容高度 */
}

.highlights {
  padding: 3rem 0;
  width: clamp(325px, 90vw, 1300px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: relative;
  min-height: fit-content; /* 新增：确保网格容器不会被错误压缩 */
}

方案3：移除不必要的position:relative（简化布局层级） #

只保留必要的定位属性，减少Safari的计算负担：

/* 移除.card的position:relative（如果没有绝对定位的子元素依赖它） */
.card {
  background-color: rgb(30, 30, 30);
  padding: 1px;
  border-radius: 10px;
  height: 100%;
  /* position: relative; 移除 */
}

/* 移除.card > div的position:relative（如果不需要做定位参考） */
.card > div {
  background-color: black;
  border-radius: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  /* position: relative; 移除 */
}

方案4：给文本容器添加flex:1（兜底的内容撑开） #

如果还是有少量内容截断，给卡片里的文本容器加上flex:1，让它自动占据剩余高度：

.card > div > :nth-child(2) {
  padding: 2rem;
  background: linear-gradient(to bottom, rgb(20, 20, 20) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  flex: 1; /* 新增：强制文本容器撑开剩余空间 */
}

验证建议 #

修复后可以用以下方式确认效果：

1. 直接用你的iPhone 14 Pro访问测试页面
2. 用Mac的Safari开发者工具连接iPhone进行真机调试（比Chrome模拟器更准确）
3. 测试时不仅看内容是否完整，还要验证不同屏幕旋转状态下的表现

按照这个思路修改，应该能解决你遇到的真实移动端卡片截断问题！如果还有其他细节问题，随时补充信息我再帮你调～