viewport标签必须写为并置于最顶部，广告图片需设max-width: 100%; height: auto; display: block; 容器禁用固定像素宽，第三方广告需重置宽高或用aspect-ratio适配，字号及间距须用rem/em。

viewport 标签漏写或写错，广告区域直接被压缩成一条线

手机浏览器默认以约 980px 宽度渲染页面，width=device-width 和 initial-scale=1.0 缺一不可。漏掉 initial-scale=1.0，iOS 上广告图文字小到无法点击；写成 width=375 或 width=414，安卓机直接无视，广告错位、溢出甚至触发横向滚动条。

必须把 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 放在 最顶部，早于所有 <link rel="stylesheet"> 和 <script></script>。部分 Android WebView 会先按默认 viewport 渲染再重排，导致广告闪一下才撑开——这就是标签位置错了。

广告图片用 width: 100% 却没配 height: auto，结果拉伸变形

只加 width: 100% 不够，必须同步加 height: auto，否则 img 会按原始宽高比拉伸或压扁。更稳妥的做法是统一加：

img.ad-banner {
  max-width: 100%;
  height: auto;
  display: block;
}

注意：max-width 比 width 更安全，它允许图片在窄屏下缩放，又不会在大屏上被强制拉宽失真。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

广告容器用了固定像素（如 width: 750px），小屏直接横向滚动

广告外层容器不能写死 px，否则在 360px 宽的低端安卓机上必然溢出。正确方式是：

• 用 width: 100% 或 max-width: 100vw，让容器随屏幕变化
• 如果广告需居中且有最大宽度限制（比如设计稿是 750px），用 max-width: 750px; margin: 0 auto;
• 避免用 vw 直接设容器宽，例如 width: 75vw —— 它不考虑父级 padding 或 border，容易撑破布局

第三方广告 JS 加载后强行注入固定宽高的 <iframe></iframe> 或 <div> <p>很多广告 SDK（如广点通、穿山甲）默认插入带 <code>style="width: 320px; height: 50px;" 的元素，直接破坏响应式。应对方法：

• 监听广告容器加载完成，用 JS 重置其子元素宽高：adContainer.querySelector('iframe').style.cssText = 'width: 100% !important; height: auto !important;'
• 对 iframe 内容不可控时，用 object-fit: contain 包裹容器，并设 height: 0; padding-bottom: 15.625%（按 640×100 像素比例算出的 aspect-ratio）
• 若广告支持响应式参数（如穿山甲的 adWidth: '100%'），务必显式传入，别依赖默认值

最常被忽略的一点：广告区域的 font-size、padding、line-height 如果还用 px，在小屏上按钮点不到、文字看不清——这些尺寸必须和主站一样走 rem 或 em，不能单独“豁免”。