手机端html必须显式声明utf-8编码且viewport配置完整：须置于最前；viewport需含width=device-width、initial-scale=1.0等四项；rem适配依赖js动态设根字号，vw方案需注意兼容性与vh跳变问题。
手机端HTML必须显式声明UTF-8编码，否则90%以上概率出现中文乱码；viewport配置缺一不可，否则页面会默认按980px宽缩放，文字小到无法阅读。
meta charset 必须写在 head 最开头
浏览器解析HTML时，一旦遇到非ASCII字符（比如中文），会立即回退查找<meta charset>。如果该标签位置靠后、或被JS动态插入、或根本没写，就会按系统默认编码（如GBK）解码，导致乱码。
- 正确写法：
<meta charset="UTF-8">必须放在内第一个位置，紧贴开始标签 - 错误写法：
<meta http-equiv="content-type" content="text/html; charset=UTF-8">已过时，部分安卓WebView不识别 - 编辑器保存时也要选UTF-8无BOM格式：VS Code右下角点击编码 → “Save with Encoding” → 选
UTF-8（不是UTF-8 with BOM）
viewport 标签不能只写 width=device-width
仅设width=device-width会让iOS Safari把页面当桌面站处理，自动缩放到980px宽再显示，文字极小。必须组合控制缩放行为。
- 最小安全配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
initial-scale=1.0强制以1:1逻辑像素比渲染，避免默认缩放 -
maximum-scale=1.0和user-scalable=no防止用户双指放大后布局错乱（尤其表单页） - 注意：某些Webview（如微信内置）会忽略
user-scalable=no，但前两项必须保留
rem适配需配合JS动态设置根字体大小
纯CSS的rem单位不会自动适配，必须用JS读取document.documentElement.clientWidth实时计算html的font-size。
- 基础脚本：
function setRem() { const w = document.documentElement.clientWidth; document.documentElement.style.fontSize = w / 375 * 100 + 'px'; } - 必须在
DOMContentLoaded后执行一次，并监听resize和orientationchange事件（横竖屏切换时clientWidth会变） - 设计稿按375px宽时，1rem = 100px；若设计稿是750px，需改为
w / 750 * 100 - 注意：iOS Safari在
resize事件中可能返回错误宽度，建议加setTimeout防抖
vw单位适配更轻量但要注意兼容性断点
vw方案无需JS，直接用CSS计算，但老版本安卓WebView（4.4以下）不支持，且iOS Safari对vh在地址栏展开/收起时有高度跳变问题。
- 推荐写法：
font-size: calc(100vw / 375 * 16);（对应设计稿375px下16px字体） - 慎用
vh做全屏高度：Safari地址栏隐藏时vh值会突变，建议用min-height: 100vh兜底 - PostCSS插件
postcss-pxtorem可自动转换px→rem，但Vite项目需配rootValue: 37.5（因1rem=10px对应375px设计稿） - 真正难的是字体大小临界点：小屏下12px文字已难辨识，需用媒体查询强制最小字号，比如
@media (max-width: 320px) { body { font-size: 14px; } }
最易被忽略的是：viewport配置和charset声明必须在首屏HTML内硬编码，任何通过JS动态注入、或服务端模板延迟渲染的方式，都会导致首帧乱码或缩放异常——这两项没有“优雅降级”，错就是错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
