移动端浮窗广告在小屏下自动缩小需用媒体查询（≤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控制缩放锚点，防止偏移出界
字体、按钮、图片同步适配缩放比例
仅缩容器不够，内部文字和操作元素也需协调变化，否则会出现小字难读、按钮太小无法点击等问题：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 标题文字用
rem或vw单位，例如font-size: 1.2rem→ 在小屏根字号减小时自然变小 - 关闭按钮（×）建议最小尺寸 ≥ 36×36px（符合移动端最小点击热区规范），可用
min-width: 36px; min-height: 36px - 广告图用
width: 100%; height: auto;+object-fit: contain防止拉伸变形
结合 JavaScript 做兜底与交互增强
CSS 媒体查询无法感知设备像素比或用户手势，必要时可用 JS 补充：
- 监听
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 是否被二次缩放（检查
<meta name="viewport">是否含user-scalable=no干扰）
不复杂但容易忽略的是：浮窗的 z-index 层级在缩放后不能被其他元素遮挡，建议固定设为 z-index: 9999；另外，缩放后的点击区域若变小，可在父容器加 cursor: pointer 和 touch-action: manipulation 提升响应灵敏度。
