页面在手机上缩成一团的头号原因是viewport meta标签缺失或参数错误，必须设置width=device-width、initial-scale=1.0，且置于head最前；否则浏览器按980px渲染后缩放，导致文字过小、点击错位。
viewport meta 标签写不对，页面在手机上直接缩成一团
移动端显示异常的头号原因就是 <meta name="viewport"> 缺失或参数错。不加这行，iOS 和 Android 浏览器会默认按 980px 宽度渲染，再整体缩放进屏幕，文字小得看不清，点击区域错位。
必须写，且只用这一种最小有效组合：<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width是核心——它让 CSS 像素宽度匹配设备逻辑宽度（比如 iPhone 14 是 390px），不是物理像素，也不是固定值 375 -
initial-scale=1.0必须配对出现；单独写width=device-width在旧版 UC 或 iOS Safari 中仍可能触发默认缩放 - 标签必须放在
<head>最前面，动态插入、塞在<body>里、或被 CMS 多次注入都会失效 - 调试时可在控制台执行
document.querySelector('meta[name="viewport"]')，确认取到的content值是你写的那个
description 和 keywords meta 标签对 SEO 的实际影响很有限
搜索引擎已基本不依赖 keywords，写了也几乎不影响排名；description 不参与排序，但直接影响搜索结果页的摘要展示和点击率。
关键点在于准确性和长度控制：
立即学习“前端免费学习笔记（深入）”；
-
description应该是当前页面内容的精准概括，避免堆砌关键词；中文建议控制在 120–160 字符内，超长会被截断 -
keywords可以省略，如果保留，仅用于内部标记或 CMS 管理，别指望它提升 SEO -
robots要按需设置：<meta name="robots" content="index, follow">是默认行为，显式声明仅在需要noindex或nofollow时才有意义
user-scalable=no 和 maximum-scale=1.0 是可访问性高危配置
加了 user-scalable=no 并不能真正禁用双指缩放（尤其在新版 iOS Safari 中），反而会让残障用户、老年用户或视力不佳者无法放大阅读，违反 WCAG 基本原则。
真实风险比想象中更具体：
- 部分安卓 WebView 对
maximum-scale=1.0支持不一致，可能导致 pinch-zoom 失效或横屏卡死 - 在 iOS 设置中开启「更大字体」后，
user-scalable=no会直接压制系统级缩放，导致文字不可读 - 如果你真需要 Web App 模式（如 kiosk 设备），才考虑启用；普通网站上线前务必删掉
charset 和 viewport 的顺序与位置影响首屏渲染
<meta charset="UTF-8"> 和 <meta name="viewport"> 都必须放在 <head> 最顶部，且 charset 应尽可能靠前——浏览器解析到它才会以 UTF-8 解码后续 HTML，否则可能触发字符乱码或重加载。
常见连带问题：
- 若
charset写在 viewport 后面，某些安卓 WebView 会在解析 viewport 前用错误编码读取，导致缩放规则应用失败 - 框架项目（如 Next.js、Vue CLI）要确认 SSR 输出的 HTML 源码里这两个标签确实存在，而不是只靠客户端 JS 注入
- 不要写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，它等价于charset但更冗长，且部分老浏览器识别不稳定
