移动端背景图显示异常90%源于容器高度未撑开、background-size未配对或viewport缺失；核心解法是用cover/contain配合no-repeat，优先采用100dvh并确保viewport声明存在。
移动端背景图“没铺满”“被裁掉”“留黑边”，90%不是图的问题，是容器高度没撑开、background-size没配对、或viewport缺失导致的。
为什么background-position: center在手机上还是切图？
因为background-position只管“图往哪摆”，不管“图怎么缩”。浏览器默认用background-size: auto，图片原尺寸硬塞进容器，超出部分直接裁——哪怕你写了center，边缘照样切掉。
-
background-size: cover才是控制缩放的核心：等比放大填满容器，可能裁边，但不留白 -
background-size: contain会完整显示整张图，但常留上下/左右黑边（适合小屏关键内容不可裁场景） - 必须配
background-repeat: no-repeat，否则开发时用占位图容易误以为“没生效”，其实是平铺了 - 别写
100% 100%或auto，前者拉伸变形，后者不缩放
iPhone Safari 上背景图“只显示一截”怎么办？
真机上没铺满，大概率不是 CSS 写错，而是容器本身没高度。Safari 对min-height: 100vh渲染不稳定（地址栏收放导致vh动态变化），背景图“没地方铺”。
- 优先用
min-height: 100dvh（dynamic viewport height），它能响应地址栏显隐，兼容 iOS 16+ - 降级方案：
min-height: 100vh+@supports not (height: 100dvh) { ... }fallback - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，缺了这句，iOS Safari 按桌面宽度（980px）渲染，cover作用对象完全错了 - 检查父容器是否塌陷：如果背景设在
<div>上，但该<code><div>没内容、没高度，背景自然不显示 <h3>如何用媒体查询让小屏不裁关键内容？</h3> <p>横屏手机宽高比（如 19.5:9）和常见横构图背景（16:9）不匹配，<code>cover必然裁上下。这时不能硬扛，得换策略。- 统一用
min-width断点（移动优先）：基础样式写小屏，再用@media (min-width: 768px)覆盖大屏 - 小屏改用
background-size: contain+background-position: center top，确保标题/人脸区域可见 - 更稳妥：不同断点加载不同图，比如
@media (max-width: 480px) { background-image: url('bg-mobile.jpg'); }，避免单张图在所有设备上硬适配 - 注意路径重复加载问题：浏览器可能预加载所有
url()，哪怕媒体查询未匹配；建议用不同文件名（bg-desktop.jpg/bg-mobile.jpg）区分缓存
关键内容总被裁？试试精准控制
background-positioncenter center只是默认锚点，对人物、LOGO、按钮等关键元素常不够用。裁哪里，取决于图片内容分布和屏幕宽高比差值。- 把重要内容放在图片中心60%区域内（安全区），这是最省事的预防方式
- 用百分比微调：
background-position: 50% 30%把垂直锚点往上移，把脸/标题往可视区“拉” - 关键词组合更直观：
center top适合天空+标题类背景，center bottom适合地面+产品类 - 避免用像素值（如
20px 40px），响应式下会失准；百分比或关键词才真正适配
真正难的不是写几行 CSS，而是判断这张图在 iPhone 竖屏下到底该“保全貌”还是“保焦点”——前者用
contain，后者用cover加background-position精细调。选错策略，再调参数也白搭。 - 统一用
