移动端浮窗广告在小屏下自动缩小需用媒体查询（≤480px）配合transform: scale(0.75)、transform-origin: top right缩放容器，并同步调整字体、按钮（≥36×36px）、图片等内部元素，辅以JS监听横竖屏及WebView兼容处理。

在 H5 页面中，让移动端浮窗广告在小屏设备下自动缩小，核心是通过 CSS 媒体查询（Media Queries）配合相对单位与响应式布局逻辑来实现。关键不是“隐藏”或“移除”，而是按视口宽度动态缩放浮窗尺寸和内容，同时保持可点击性与视觉合理性。

用 max-width 匹配主流移动设备宽度

多数手机屏幕宽度在 320px～480px（物理像素经 viewport 缩放后），推荐以 480px 为断点。当视口宽度 ≤ 480px 时，触发缩小规则：

• 给浮窗容器（如 .ad-float）设置 max-width: 100vw，避免超出屏幕
• 用 transform: scale(0.75) 缩小整体（比直接改 width/height 更平滑，且不破坏布局流）
• 配合 transform-origin: top right 控制缩放锚点，防止偏移出界

字体、按钮、图片同步适配缩放比例

仅缩容器不够，内部文字和操作元素也需协调变化，否则会出现小字难读、按钮太小无法点击等问题：

• 标题文字用 rem 或 vw 单位，例如 font-size: 1.2rem → 在小屏根字号减小时自然变小
• 关闭按钮（×）建议最小尺寸 ≥ 36×36px（符合移动端最小点击热区规范），可用 min-width: 36px; min-height: 36px
• 广告图用 width: 100%; height: auto; + object-fit: contain 防止拉伸变形

结合 JavaScript 做兜底与交互增强

CSS 媒体查询无法感知设备像素比或用户手势，必要时可用 JS 补充：

DeepBI DHTML 页面生成器

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

下载

• 监听 window.matchMedia，在横竖屏切换时重新计算缩放比
• 对 iOS Safari 等可能忽略 transform 缩放的场景，加一层 width 和 font-size 的内联样式覆盖
• 用户点击关闭后，用 localStorage 记录本次是否已缩小，下次加载跳过动画，提升体验

测试要点：真机优先，关注三个边界

不要只靠 Chrome DevTools 模拟器验证，重点实测以下场景：

• iPhone SE（320px 宽）、iPhone 12（390px）、安卓小屏折叠机（如 Galaxy Z Flip，展开前 260px 左右）
• 横屏状态（如 iPad mini 横置时宽度达 1024px，应退出缩小逻辑）
• 微信内置浏览器、QQ 浏览器等 WebView 中 viewport 是否被二次缩放（检查 是否含 user-scalable=no 干扰）

不复杂但容易忽略的是：浮窗的 z-index 层级在缩放后不能被其他元素遮挡，建议固定设为 z-index: 9999；另外，缩放后的点击区域若变小，可在父容器加 cursor: pointer 和 touch-action: manipulation 提升响应灵敏度。