必须添加完整 viewport 配置：width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no；魅族 Flyme 7–10 对 viewport 解析严格，仅写 width=device-width 会导致页面缩放异常；initial-scale=1.0 是关键，maximum-scale=1.0 和 user-scalable=no 防止意外放大；部分机型需配合 html{font-size:100px}+rem 兜底。
必须加 viewport，且不能只写 width=device-width
魅族手机（尤其是 Flyme 系统 7–10 版本）对 viewport 解析较严格：仅写 会导致页面被强制缩放到桌面宽度（约 980px），文字极小、按钮点不中。真实生效的底线配置是：
注意三点：
• initial-scale=1.0 是关键，它让 CSS 像素与设备独立像素对齐；
• maximum-scale=1.0 和 user-scalable=no 能防止 Flyme 浏览器或 UC 内核意外放大；
• 魅族部分机型（如 MX6、PRO7）在 Chrome 自定义标签页中仍可能忽略 initial-scale，此时需配合 html { font-size: 100px; } + rem 布局兜底。
HBuilder 调试时，USB 连接失败的真因和解法
不是线没插好，而是魅族默认关闭了「USB 调试（安全设置）」——它藏在开发者选项里，但和 Android 标准路径不同：
- 先打开「设置 → 关于手机 → 连续点击「Flyme 版本」7 次」激活开发者选项
- 再进「设置 → 更多设置 → 系统安全 → USB 调试（安全设置）」→ 打开
- 连接电脑后，手机弹出「允许 USB 调试吗？」对话框，**必须勾选「始终允许」并点确定**（只点确定无效）
- 若 HBuilder 仍识别不到，检查
tools/1.0.31/目录是否存在；如缺失，从官网下载完整安装包重装，不要用精简版
跳过这一步，mui 的 plus.webview API 在真机上会返回 undefined，但模拟器一切正常，极易误判为代码问题。
立即学习“前端免费学习笔记（深入）”；
点击高亮、字体发虚、按钮失灵 —— Flyme 的 CSS 隐形坑
魅族浏览器（基于 Chromium 但深度定制）对以下 CSS 行为有特殊处理：
-
a, button, input, textarea默认点击有深灰背景，需强制清除：a, button, input, optgroup, select, textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); } - 使用
rem时，若html的font-size设为非整数值（如16.6667px），Flyme 渲染引擎会四舍五入导致布局错位，建议用媒体查询分段设置：@media screen and (min-width: 320px) { html { font-size: 100px; } }
@media screen and (min-width: 375px) { html { font-size: 117px; } }
@media screen and (min-width: 414px) { html { font-size: 129px; } } - 禁用
user-select: none：Flyme 下该属性会导致长按复制失效，且某些input失去焦点
本地存储和 WebSocket 在魅族上的兼容性边界
localStorage 和 sessionStorage 在 Flyme 浏览器中基本可用，但有两个硬限制：
- 当用户开启「隐私模式」或「无痕浏览」时，
localStorage写入会静默失败（不报错），建议用 try/catch 包裹并 fallback 到内存缓存 -
WebSocket在 Flyme 9+ 中支持良好，但若服务端未设置Sec-WebSocket-Protocol头，部分魅族机型（如 17 Pro）会直接断连且onerror不触发，只能靠心跳超时检测 - 避免在
plus.ready回调外调用plus.storage，否则在 HBuilder 打包的离线包中会返回空对象
真正麻烦的是「离线资源加载」：魅族浏览器对 manifest 文件支持已废弃，必须改用 Service Worker + Cache API，且 SW 的 install 事件需在 DOMContentLoaded 后注册，否则在 Flyme 10 上会被跳过。
