根本原因是未添加viewport标签，手机浏览器默认按980px桌面宽度渲染，导致内容缩小、文字模糊、点击错位；必须在head最顶部添加。
不加 <meta name="viewport"> 标签，手机浏览器默认以桌面宽度（通常 980px 左右）渲染页面，导致内容被缩得很小、文字看不清、点击区域错位——这是绝大多数“HTML在手机上显示异常”的根本原因。
必须加 viewport 元标签，且参数不能少
只写 <meta name="viewport" content="width=device-width"> 不够。缺少 initial-scale=1.0 时，iOS Safari 仍可能自动缩放；没有 user-scalable=no 或 maximum-scale=1.0，用户双指张开会破坏布局，尤其影响表单和按钮对齐。
- 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 不要用空格或换行破坏属性值格式，
name和content值必须严格匹配，否则部分 Android WebView 会忽略整条声明 - 该标签必须放在
内，且越靠前越好——放在<title></title>之后、CSS<link>之前最稳妥
资源路径用相对路径，别用绝对本地路径
用文件管理器直接打开手机上的 index.html 时，浏览器走的是 file:// 协议。此时若 CSS 或 JS 引用写成 C:\project\style.css 或 /css/style.css（开头带斜杠），路径会解析失败，样式和脚本全部丢失。
- CSS/JS/图片一律用相对路径：例如
./css/style.css、img/logo.png - 避免
../跨多级目录，容易因入口 HTML 文件位置变化而失效 - 如果用 Python 启动服务器（
python -m http.server 8000），file://和http://行为一致，但测试阶段仍建议统一用相对路径，避免上线后出问题
字体、宽度、定位别写死像素值
写 width: 320px 或 font-size: 16px 在 iPhone SE 上可能刚好，在 Pixel 8 Pro 上就挤成一团。移动端不是“适配某一款手机”，而是响应所有视口变化。
立即学习“前端免费学习笔记（深入）”；
- 容器宽度优先用
%、vw或max-width+margin: 0 auto - 字体大小用
rem或em，基础字号设在html或body上（如font-size: 16px），再按比例调整子元素 - 慎用
position: absolute配固定top/left，它脱离文档流后极易在小屏上被截断或重叠 - Flexbox 和 Grid 是更安全的选择，
flex-wrap: wrap能自动处理换行，比float更可控
真正容易被忽略的点是：viewport 标签生效的前提是页面没被其他机制干扰——比如某些国产浏览器强制启用“极速模式”或“兼容模式”，会绕过你的 meta 声明。遇到这种情况，得在 里补一句 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">，并确认目标设备浏览器本身支持 viewport（IE9+、Android 4.0+ WebView 均支持，老机型除外）。
