HTML广告需显式声明尺寸、加载策略和fallback：viewport必须含initial-scale=1.0；广告容器需max-width:100%、min-height、min-width；图片用picture+srcset双适配；第三方广告CSS需!important兜底并延迟修复。
HTML网页广告无法靠“自动适配”存活——它必须显式声明尺寸边界、加载策略和 fallback 行为，否则在小屏上会溢出、在高 DPR 屏上模糊、在窄视口里被截断。
viewport meta 标签漏掉 initial-scale=1.0 就等于没设
广告容器哪怕写了 width: 100%，只要 缺了 initial-scale=1.0，iOS Safari 就可能默认放大 1.3 倍，Android 浏览器可能无视缩放逻辑，结果广告区域被压缩变形或错位。必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
别加 user-scalable=no：广告页若嵌在 WebView 或 PWA 中，视力障碍用户需要双指缩放查看文案，硬禁用会违反 WCAG。
广告图片/iframe 容器必须带 max-width 和 min-height 保底
广告常以 或第三方 SDK 插入，但它们默认不继承响应式约束。常见错误是只写：
img.ad-banner { width: 100%; }
这会导致小图被拉伸模糊，大图在窄屏溢出。正确做法是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 所有广告媒体元素统一加
max-width: 100%+height: auto（防止变形） - 外层容器设
min-height: 90px（横幅广告最低可读高度）+min-width: 320px（防极端窄屏压扁） - 若用
加载第三方广告，需额外加style="border: none;"避免默认边框撑开容器
用 picture + srcset 给 banner 图做密度与宽度双适配
纯靠 srcset 不够，纯靠 media 断点也不够。Banner 图要同时应对：小屏宽度窄 + 高 DPR（如 iPhone 15 Pro 的 3x）+ 不同格式支持（WebP/AVIF）。必须组合使用：
<picture><source media="(max-width: 480px)" srcset="ad-320w.webp 1x, ad-640w.webp 2x, ad-960w.webp 3x" type="image/webp"><source media="(max-width: 480px)" srcset="ad-320w.jpg 1x, ad-640w.jpg 2x"><source media="(min-width: 481px) and (max-width: 768px)" srcset="ad-768w.webp 1x, ad-1536w.webp 2x"> @@##@@ </source></source></source></picture>
注意三点：
-
media条件的生效；未匹配则回退到
- 每个
srcset后都带1x/2x，浏览器按设备 DPR 自动选，不用 JS 判断 -
width和height属性，否则 SSR 渲染时会触发 FOUC 或布局偏移
第三方广告脚本注入后，CSS 覆盖优先级容易失控
很多广告 SDK（如 Google AdSense、腾讯优量汇）会动态插入 最麻烦的是：某些广告素材本身是固定宽高的 Flash 或旧版 Canvas，现代浏览器已禁用 Flash，而 Canvas 不响应 ，并内联 style 或加载自己的 CSS。这时你写的 .ad-container img { max-width: 100% } 可能被忽略，因为内联样式权重更高。解决方式：
!important 强制覆盖：max-width: 100% !important;
[class*="ad"] 或 [id*="google_ads"] 这类属性选择器提前兜底，避免依赖具体 class 名DOMContentLoaded 后，用 setTimeout 延迟 300ms 再执行尺寸修复（等 SDK 渲染完成）max-width。这种广告必须联系供应商更新素材，前端无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
