移动端页面问题多因viewport、data-、hidden、autocapitalize等全局属性使用错误：viewport须硬编码于head最前且含initial-scale=1.0；data-命名须合法并遵循驼峰转换；hidden语义与display:none不同，不可替代aria属性；autocapitalize/autocorrect存在兼容性陷阱。
移动端页面出问题，八成不是布局或 JS 逻辑错了，而是几个关键全局属性没用对——viewport 没写、data-* 命名不规范、hidden 用错语义，甚至 autocapitalize 在 iOS 上直接失效。这些属性本身不渲染，但一错就导致输入异常、可访问性降级、样式闪动或交互失灵。
viewport meta 标签必须硬编码在 head 最上方
它不是“加了就好”，而是浏览器首次解析 HTML 时就决定是否启用移动渲染模式。漏掉、拼错、动态插入，都会退化到 980px 桌面视口。
- ✅ 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，且必须放在里所有 CSS/JS 引用之前 - ❌ 错误示例：
<meta name="viewport" content="width=device-width">（缺initial-scale=1.0，iOS Safari 会先按 980px 渲染再缩放，touch 坐标偏移） - ⚠️
user-scalable=no或maximum-scale=1.0不仅违反 WCAG，iOS 13+ 会降权提示，横屏时还可能卡死；现代项目基本不该加 - ⚠️ 绝对不要写
width=375或width=414：设备报告的device-width是逻辑宽度（受 DPR、系统缩放、横竖屏影响），硬编码等于放弃适配
data-* 属性命名和读取要严格遵循驼峰转换规则
移动端常通过 data- 传配置给 JS 控制行为（比如懒加载阈值、表单校验规则），但命名不合规会导致 dataset 读不到值，尤其在 Safari 和旧版 WebView 中静默失败。
- ✅ 合法命名：
data-api-endpoint→ JS 中读作el.dataset.apiEndpoint（连字符转驼峰，首字母小写） - ❌ 非法命名：
data-API-Endpoint（大写字母被忽略）、data-user_id（下划线不转驼峰）、data-1st-item（数字开头不合法） - ⚠️
dataset只支持 ASCII 字母、数字、连字符、点、下划线；中文或 emoji 会变成空字符串 - ⚠️ 不要在
data-里存敏感信息（如 token、用户 ID），它完全暴露在 DOM 中
hidden 属性与 display: none 的行为差异影响布局和可访问性
移动端屏幕小、交互密集，hidden 用错会直接导致内容不可见却仍占空间，或该隐藏的元素被读屏器朗读，引发 WCAG 失败。
- ✅
hidden（无值）等价于display: none：元素不渲染、不参与布局、不触发重排，但语义上明确“暂不展示” - ✅
hidden="until-found"等价于content-visibility: hidden：元素仍参与布局（内外边距保留），只隐藏内容，适合搜索结果预加载场景 - ❌ 不要用
hidden替代aria-hidden="true"：前者移除可访问性树，后者仅隐藏语义；按钮禁用时应优先用aria-disabled="true" - ⚠️
hidden是枚举属性，hidden="false"或hidden="0"仍生效（只要属性存在就隐藏），必须彻底移除属性才能显示
autocapitalize 和 autocorrect 在虚拟键盘上的兼容性陷阱
移动端输入体验高度依赖这些属性，但它们在桌面 Safari、Firefox 和部分 Android WebView 中支持度极低，盲目使用会让用户输入预期完全错乱。
- ✅
autocapitalize="sentences"适用于评论框、富文本输入；autocapitalize="off"或"none"适用于密码、验证码、用户名 - ✅
autocorrect="off"必须配合spellcheck="false"才能在 Chrome Android 上真正关闭纠错（仅autocorrect不够） - ❌
autocapitalize="characters"在桌面 Safari 完全不生效；autocorrect在 Firefox 桌面端仅部分支持 - ⚠️ 这些属性只影响虚拟键盘行为，不改变实际输入值；JS 仍需做后端校验，不能依赖前端限制
真正容易被忽略的是：这些属性多数不触发重绘，但一旦用错，问题往往藏在交互链路末端——比如 data- 值读不到导致懒加载不触发，autocapitalize 失效让邮箱地址首字母大写，用户反复删改。调试时别只盯着 JS 控制台，先 inspect 元素看属性是否存在、拼写是否合规、值是否被浏览器识别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
