iPhone上img{max-width:100%;height:auto}不撑满，主因是父容器缺明确宽度或min-width:0，导致iOS Safari冻结图片宽度；需配合viewport-fit=cover、safe-area-inset-bottom、srcset及横屏监听。
img { max-width: 100%; height: auto; } 在 iPhone 上为什么有时不撑满？
不是 CSS 写错了，而是它依赖父容器提供可计算的宽度基准。iPhone Safari（尤其 iOS 12–15）对无明确宽度的 flex 容器、或未设 min-width: 0 的 flex item 会“冻结”图片宽度，导致 max-width: 100% 实际按 0 计算。
常见卡点：
- 父
<div> 只写了 <code>display: flex，没设width或min-width: 0 - 图片放在
<section></section>里，该元素没min-height，iOS 渲染时高度为 0，height: auto失效 - 用了
width: 100%而非max-width: 100%——前者强制拉伸，宽高比崩坏 - iPhone 6/7/8 是 2x 屏，但 viewport 宽仍是 375px，
sizes必须按 CSS 像素写，不是物理像素 - 别只给 2x 图，iOS Safari 对
srcset的解析比 Chrome 更严格，缺一个w描述符就回退到src - 小屏首屏图建议额外加
loading="lazy"关闭（设为eager），否则 iOS 15+ 可能延迟加载 - 所有基于
clientWidth动态设html.font-size的代码，必须同时监听resize和orientationchange - 图片父容器避免用
vh单位定高（如height: 80vh），横屏时vh指向屏幕短边，高度骤减，height: auto才可靠 - 如果用了
object-fit: cover，记得加object-position: center，否则 iPhone 横屏时焦点容易偏移
iPhone X / XR / 12+ 等刘海屏 + 小黑条怎么避免图片被遮挡？
关键不是改图片样式，而是先让整个页面“贴边渲染”。必须在 中写对 viewport，并启用安全区域适配：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
立即学习“前端免费学习笔记（深入）”；
然后对可能吸底的图片容器（比如 banner、全屏轮播）加 padding 补白：
.banner-img { padding-bottom: env(safe-area-inset-bottom); }
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
注意：env(safe-area-inset-bottom) 只在 viewport-fit=cover 下生效；若用 contain 或漏写，这个值始终为 0。
大图在 iPhone 弱网下加载慢，首屏白屏怎么办？
单纯靠 max-width 不解决资源加载问题。必须配合 srcset + sizes 让浏览器按设备 DPR 和视口宽度选图：
<img src="img-320.jpg" srcset="img-320.jpg 320w, img-750.jpg 750w, img-1200.jpg 1200w" sizes="(max-width: 320px) 280px, (max-width: 750px) 710px, 1160px" alt="示例">
要点：
横屏切换后图片变形或溢出？
iOS 横屏时 window.innerWidth 突变，但很多 JS 动态计算 font-size 或容器尺寸的逻辑没监听 orientationchange，导致 rem 基准错乱，连带图片容器宽度异常。
实操建议：
真正卡住人的从来不是某一行 CSS，而是 viewport、flex 行为、安全区、DPR 和横竖屏状态这五者之间的隐式耦合。漏掉任意一环，图片就在某个 iPhone 上“突然不听话”。
