超大屏内容被压成窄条的根本原因是容器宽度未随视口合理收敛，须用分层max-width（如1200px/1440px/1680px/1920px）配合width:100%、margin:0 auto及clamp()字体缩放，并避免body干扰手势区与纯数学居中。
超大屏下内容被压成窄条，根本不是max-width写小了
直接设 max-width: 1200px 在 4K 屏上会留出左右各 1320px 空白，这不是“留白太多”，是容器宽度没随视口合理收敛。单一固定值无法覆盖 1366px 到 5K 的跨度，必须分层控制。
- @media (min-width: 1440px):
max-width: 1200px（适配主流笔记本） - @media (min-width: 1920px):
max-width: 1440px（匹配 2K 内容密度） - @media (min-width: 2560px):
max-width: 1680px（防 4K 下内容过窄） - @media (min-width: 3200px): 可升至
max-width: 1920px，但需配合font-size: clamp(1rem, 1.2vw, 1.5rem)
width: 100% + margin: 0 auto 不生效？旧版 Safari 就认这个
只写 max-width 和 margin: 0 auto 不够。某些旧版 Safari 或 WebView 会沿用默认 width: auto，导致窄屏下不占满、留白错位。
- 必须显式声明
width: 100% - 正确组合是：
width: 100%; max-width: 1440px; margin: 0 auto; - 禁用
body或html上的margin/padding——它会干扰 iOS/Android 边缘手势穿透区
宽屏视觉重心漂移：纯居中反而让人眼找不到落点
人在宽屏上习惯聚焦在屏幕中央偏左区域（阅读习惯 + F型浏览），数学居中会让主内容“失锚”。这不是对齐问题，是视觉权重分配问题。
- 关键区块（如标题、主图）在
@media (min-width: 1920px)下加transform: translateX(-2%) - 容器改用
margin-inline: auto替代margin: 0 auto，语义更清晰且兼容 Flex/Grid - 导航栏、侧边栏不要撑满全宽——它们保持紧凑，才能不稀释主内容权重
grid-template-columns 写 repeat(3, 1fr) 是自毁式写法
硬写列数在小屏会强行撑开，在超宽屏又留白爆炸。真正要的是“当前宽度能塞几个就塞几个”，靠浏览器自动算。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))); - 必须配
gap: 16px和子项min-width: 0（防文本溢出破坏换行） - 禁止嵌套
display: grid容器——语义混乱，Android WebView 兼容差
