viewport meta标签必须写对，否则全屏背景无法响应：标准写法为<meta name="viewport" content="width=device-width, initial-scale=1">，缺一不可；写错或缺失会导致浏览器按980px渲染，background-size: cover失效，且常见错误包括硬编码width、漏initial-scale、标签位置错误或滥用user-scalable=no。
viewport meta 标签必须写对，否则全屏背景根本不会“响应”
所有全屏背景的响应式失效，90% 都卡在这一行：<meta name="viewport" content="width=device-width, initial-scale=1">。它不是可选项，是硬性前提——没它，浏览器默认按 980px 渲染，background-size: cover 再怎么设也压不住这个缩放底噪。
常见错误现象：
-
content值写成width=375或漏掉initial-scale=1 - 标签塞在
<body>里，或被注释包着 - 加了
user-scalable=no，导致 iOS Safari 在某些系统版本下连双击放大都锁死，间接让背景裁切错位
调试时直接看 Chrome DevTools 的 Rendering > Viewport 面板，确认当前宽度是否等于设备物理宽度（如 iPhone 14 Pro 是 430px），而不是 980px。
全屏背景用 background-size: cover 还是 contain？
cover 和 contain 行为差异极大，选错会导致背景拉伸、裁切或留白，尤其在 iPad 横竖切换时明显。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
cover：当背景图需填满整个视口且允许边缘裁切（如风景图、渐变纹理），但必须配合background-position: center center，否则关键内容可能被切掉 - 用
contain：当背景图含重要文字/图标（如品牌 logo 背景），必须完整显示，但会留白；此时建议加background-color填充留白区 - 别用
100% 100%：它强制拉伸变形，不同宽高比设备上失真严重
示例：
body {
background-image: url('hero.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; /* 注意：iOS Safari 不支持 fixed，慎用 */
}全屏布局容器用 min-height: 100vh 还是 height: 100vh？
height: 100vh 在移动端常出问题：地址栏收起/展开时，vh 值会跳变，导致背景突然裁切或滚动条闪现；min-height: 100vh 更稳，但需额外处理内容溢出。
关键细节：
- 优先用
min-height: 100vh，再配合overflow-y: auto容忍内容超长 - 若必须撑满且不允许滚动，改用
height: 100dvh（dynamic viewport height），Chrome 100+、Safari 16.4+ 支持，能响应地址栏变化 - IE11 / 旧 Android 浏览器不支持
dvh，回退方案：用 JS 监听resize动态设style.height
注意：100vh 在 iOS Safari 中实际等于「可视区域高度」，但地址栏占空间，所以初始渲染常偏高——这是设计阶段就要接受的现实，别硬靠 JS 修正。
文字排版在全屏背景上如何保证可读性？
背景图再酷，文字看不清就白搭。核心不是调 opacity，而是建立视觉层级。
实操要点：
- 永远给文字加
text-shadow：比如text-shadow: 0 2px 8px rgba(0,0,0,0.6)，比半透明遮罩更轻量、兼容性更好 - 避免纯白/纯黑文字直接压背景，用 CSS 自定义属性统一控制对比度，例如：
--text-on-bg: hsl(0 0% 100% / 0.9) - 标题用
font-size: clamp(1.5rem, 4vw, 3.5rem)实现流体缩放，但上限设死（如3.5rem），防大屏字号失控 - 行高别依赖
line-height: 1.2这种固定值，改成line-height: 1.4em或用rem，确保随字体缩放
容易踩的坑：用 backdrop-filter: blur(10px) 给文字加毛玻璃效果——iOS Safari 15.4 之前不支持，且开启后滚动性能骤降。
真正难的不是让背景铺满屏幕，而是让文字、按钮、交互元素在各种宽高比和亮度条件下始终可识别。很多项目卡在“看起来像响应式”，其实是忽略了内容与背景的动态博弈关系——这点没法靠一套 class 解决，得逐屏校验。
