viewport meta 标签必须设为 ，否则移动端浏览器默认按约980px虚拟视口渲染，无法实现1:1显示；CSS需用响应式单位（rem/em）、max-width、SVG等适配dpr与屏幕尺寸，真机测试不可替代。

viewport meta 标签必须设对

移动端浏览器默认按 980px 左右的虚拟视口渲染页面，不加 viewport 就永远做不到 1:1。常见错误是漏写 user-scalable=no（其实可选），但更致命的是写错 initial-scale 或漏掉 width=device-width。

• width=device-width 是基础，告诉浏览器“别自作主张用 980px，按设备物理宽度来”
• initial-scale=1.0 必须显式写上，否则 iOS Safari 在横屏切换后可能缓存旧缩放
• 不要写 maximum-scale=1.0 或 user-scalable=no —— 它们会禁用双指缩放，违反 WCAG 可访问性要求
• 完整写法：<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS 中避免固定像素布局

写了 viewport 还是变形？大概率是用了 px 写死了宽度、边距或字体大小。PC 端常见的 width: 1200px 在 iPhone 上直接溢出，font-size: 16px 在小屏上看着像针尖。

• 容器宽度优先用 max-width: 100% + padding 替代固定 width
• 字号改用 rem 或 em，配合根元素动态调整（比如用 JS 或 @media 控制 html { font-size }）
• 慎用 min-width: 1200px —— 它会让小屏强制出现横向滚动条，不是“1:1”，是“被裁剪”
• 图片记得加 img { max-width: 100%; height: auto; }，否则原图尺寸 > 屏幕就撑破布局

设备像素比（dpr）导致的模糊问题

即使布局缩放正确，文字和图标仍发虚？那是 CSS 像素和物理像素没对齐。iPhone 的 dpr=2/3，1px 的 CSS 边框实际要占 2～3 个物理像素，浏览器会插值抗锯齿，结果就是毛边。

DeepBI DHTML 页面生成器

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

下载

• 避免写 border: 1px solid #000，改用 transform: scaleY(0.5) 模拟 0.5px（仅适用于单边）
• 图标优先用 SVG，它天生矢量，跟 dpr 无关；位图资源需提供 @2x/@3x 版本并用 srcset 切换
• CSS 中启用 image-rendering: -webkit-optimize-contrast（Safari）或 image-rendering: crisp-edges（部分 Chrome/Firefox）可改善位图缩放质量
• 文字模糊通常因 font-smoothing 被重置，删掉 -webkit-font-smoothing: antialiased 这类 hack 更安全

Chrome DevTools 模拟 ≠ 真机表现

在 Chrome 的 Device Mode 里看着完美，真机一打开就错位？因为模拟器不还原真实 dpr 渲染逻辑、不触发某些 iOS WebKit 的私有行为（比如 position: fixed 在键盘弹出时的偏移）。

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

• 必测真机：iOS Safari + Android Chrome，至少覆盖 dpr=2（iPhone 8）和 dpr=3（iPhone 14 Pro）
• 用 window.devicePixelRatio 打印当前 dpr，确认是否与设备匹配（如 iPhone 13 mini 应为 3）
• 注意 iOS Safari 对 vh 单位的 bug：地址栏收起/展开时 100vh 会变，导致内容被遮挡，改用 100dvh（需检查兼容性）或 JS 动态计算
• 不要依赖 resize 事件监听屏幕旋转 —— iOS Safari 在旋转时可能不触发，改用 orientationchange 或监听 window.innerWidth 变化

实际做下来，最难的不是写代码，是判断哪些“PC 习惯”该扔掉：比如居中靠 margin: 0 auto + 固定宽，比如用 px 量一切，比如认为“只要 viewport 写对就万事大吉”。这些在真机上都会露出马脚。