不能直接写 width="728" height="90"，因其强制拉伸导致iPhone图片模糊、文案裁切、微信浏览器vh错乱、安卓双击缩放热区偏移；应改用max-width+width:100%+aspect-ratio或padding-top控制比例，并配合viewport、picture资源适配与safe-area处理。
直接结论：别用固定像素设横幅尺寸，优先用 CSS 的 max-width + width: 100% + aspect-ratio 或 padding-top 技法控制宽高比，再配合 viewport 元标签和 picture 兜底图像资源。
为什么不能直接写 width="728" height="90"？
HTML 的 width/height 属性是强制拉伸像素值，会导致：
- 在 iPhone 上图片糊、文字小到看不清
- 横幅被裁切（尤其用
object-fit: cover时，“满 299 减 50”文案可能直接消失） - 微信内置浏览器里 100vh 计算错乱，banner 被键盘顶上去半截
- 安卓低端机上触发双击缩放，按钮热区偏移
这些不是“兼容性问题”，而是把响应式当静态图在用。
用 aspect-ratio 固定比例最省事（但注意 Safari 版本）
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，能真正锁死宽高比，不依赖 JS 或 padding 技巧：
.banner {
width: 100%;
max-width: 970px;
aspect-ratio: 16 / 4; /* 横幅常用比例 */
background-size: contain;
background-repeat: no-repeat;
}
关键点：
-
background-size: contain确保整张图完整显示，不裁关键文案 - 搭配
max-width防止桌面端撑爆布局 - Safari 15.3 及以下不支持
aspect-ratio，需降级用padding-top: 25%（16:4 = 25%）+position: relative/absolute套层
用 picture + srcset 控制不同设备加载哪张图
促销 banner 图片常要三套资源：桌面（2000px）、Pad（1200px）、手机（750px），且 WebP 在安卓省流量，但 iOS 13 以下不认：
<picture><source media="(min-width: 1200px)" srcset="banner-2000.webp" type="image/webp"><source media="(min-width: 768px)" srcset="banner-1200.jpg" type="image/jpeg"><source srcset="banner-750.jpg" type="image/jpeg"> @@##@@ </source></source></source></picture>
注意顺序：
-
<source></source>必须按从大到小断点写，浏览器取第一个匹配的 -
type是格式兜底，不是可选——没写对，iOS 会跳过整个source -
<img src="banner-fallback.jpg" alt="限时优惠">是最终 fallback，必须保留，否则无图时留白
iframe 广告横幅怎么避免高度塌陷？
第三方广告（如 AdSense）用 iframe 插入时，常见问题不是“调不了尺寸”，而是 iframe 加载完才知真实高度，导致页面抖动或内容上跳：
- 给
iframe设min-height: 90px+height: auto，并加loading="lazy" - 用
resizeObserver监听 iframe 内容高度变化（仅现代浏览器），动态更新外层容器height - 更稳的方案：服务端预估高度（比如 Google Ad Manager 支持返回推荐尺寸），前端先占位再替换
- 绝对不要设
height: 100vh—— 微信弹出键盘后，vh值会变小，banner 直接被截
复杂点在于，横幅不是独立模块，它嵌在滚动流里；容易被忽略的是：安全区域（safeAreaInsets）在 iOS 上会影响横幅底部留白，尤其是全屏横幅加了「立即抢购」按钮时，按钮得离屏幕底边至少 20px 才不会被 Home Indicator 挡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
