必须加标签，否则手机页面按桌面宽度渲染导致文字过小、布局错乱；应使用width=device-width, initial-scale=1.0，置于head最前，避免user-scalable=no或固定width值。
手机写 HTML 时 <meta name="viewport"> 必须加
不加这行，页面在手机上会默认按桌面宽度渲染（通常是 980px 左右），文字小得看不清，缩放后布局错乱。这不是“看起来不好”，而是直接不可用。
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 固定写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别写成
width=375或user-scalable=no—— 前者在不同机型失效，后者违反可访问性要求，iOS 16+ 甚至会强制忽略 - 必须放在
里，且越靠前越好；放在 CSS 或 JS 后面可能导致闪动或重排
内联样式比外部 CSS 更靠谱，但别滥用 !important
手机浏览器加载外部 CSS 文件容易因网络抖动、缓存失效或 MIME 类型错误（比如服务器返回 text/plain）导致样式完全不生效，而内联 style 属性几乎总能立即起作用。
常见错误现象：PC 上好好的页面，手机一打开就文字堆一起、按钮消失、图片溢出 —— 八成是 CSS 没加载进来。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 关键布局（如容器宽度、字体大小、flex 排列）优先用内联
style，例如：<div style="display: flex; font-size: 16px;"> <li>避免在内联样式里写 <code>!important—— 手机端浏览器对它的解析更不稳定，某些安卓 WebView 会直接丢弃整条声明 - 如果真要复用样式，用
<style></style>标签写在里，别依赖link外链 - 首选方案：加
<meta name="viewport" content="...">后，现代 iOS Safari 默认关闭 300ms 延迟 —— 前提是没禁用缩放（即不能含user-scalable=no） - 若必须禁用缩放，改用
pointerdown事件，兼容性比touchstart更稳，且语义更准 - 千万别只绑
touchstart而不处理click—— 这会让桌面端和部分安卓浏览器彻底失灵 - 所有资源路径尽量用相对路径，但统一从当前 HTML 所在目录出发，避免
../嵌套超过一层 - 绝对路径以
/开头（如/css/main.css）只适用于已部署到根域名的场景；本地测试时会指向手机系统根目录，必然失败 - 图片、字体等静态资源，优先用 base64 内联小文件（
click 事件在 iOS 上延迟 300ms，用 touchstart 替代不总是可行
老方案是监听 touchstart 来绕过点击延迟，但问题在于：它不等同于“用户意图点击”，手指刚碰到屏幕就触发，容易误触；而且不支持键盘导航、不兼容辅助工具。
使用场景：按钮、链接、切换开关这类明确需要“点一下就响应”的操作。
实操建议：
路径写错是手机访问 404 的最常见原因，./ 和 / 行为差异大
本地双击打开 HTML 文件（file:// 协议）和手机浏览器通过 HTTP 访问，对相对路径的解析逻辑不同。比如 ./img/logo.png 在 PC 上能开，在微信内置浏览器里可能直接 404。
性能影响：路径错误不会报 JS 错，但会悄悄发起无效请求，拖慢首屏，还可能触发错误监控误报。
实操建议：
meta、每一个 style、每一次路径调整，都要立刻在真机上刷新验证，而不是等写完再测。
