手机端中文乱码主因是meta charset未紧贴<head>标签开头，且需同步确保HTTP响应头、文件保存编码均为UTF-8 without BOM，并严格按charset→viewport→title顺序书写。
meta charset="UTF-8" 必须紧贴 <head> 开始标签，且前面不能有任何字符（包括 BOM、空格、注释、<title>），否则手机浏览器（尤其是 iOS Safari 和微信 WebView）会 fallback 到系统默认编码（如 GBK），直接导致中文乱码或 JS 报 Invalid or unexpected token。
为什么手机端特别容易出错
手机浏览器解析 HTML 更严格：它只扫描前 1024 字节识别 meta charset，且对非 ASCII 前导内容零容忍。常见失效场景包括：
-
<head><!-- 注释 --><meta charset="UTF-8">→ 注释不是 ASCII，跳过识别 -
<head>\n<meta charset="UTF-8">→ 换行符前的空白被当作非 ASCII 前导 - VS Code 保存为
UTF-8 with BOM→ 文件头多出EF BB BF，iOS Safari 直接忽略meta -
<head><title>首页</title><meta charset="UTF-8">→<title>已含中文，解析器早于meta就按 GBK 解了
移动端必须同步检查的三处编码源
仅写 meta charset 不够。手机端加载时，浏览器按优先级取用：HTTP 响应头 > meta charset > 系统默认。任一环节不一致就会乱码：
- 服务端响应头必须含
Content-Type: text/html; charset=UTF-8（Nginx 配charset utf-8;，Express 用res.set('Content-Type', 'text/html; charset=UTF-8')） - HTML 文件本身必须存为
UTF-8 without BOM（VS Code 右下角确认显示 “UTF-8”，点“Save with Encoding”选 “UTF-8”而非 “UTF-8 with BOM”） -
meta charset标签值必须是"UTF-8"（全大写 U/T/F，数字 8，无下划线、无连字符；"utf8"或"UTF_8"在微信 WebView 中可能 fallback 失败）
viewport 和 charset 的顺序不能颠倒
meta viewport 必须写在 meta charset 之后，否则部分 Android WebView 会因编码未生效就解析 viewport 导致缩放异常：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head>
如果把 viewport 放前面，而 charset 晚于 <title>，iOS Safari 可能先用 GBK 解析 content 属性里的中文字符，再崩溃。
最容易被忽略的是文件保存编码和 HTTP 响应头的隐性冲突——哪怕 HTML 里写了正确的 meta charset="UTF-8"，只要服务器返回 charset=GBK，微信里打开就是满屏问号；反过来，文件存成 GBK 却声明 UTF-8，JS 里的中文字符串直接语法报错。
