页面在手机上缩成一团、文字糊、可拖动，主因是viewport未生效或被破坏；必须将<meta name="viewport" content="width=device-width, initial-scale=1.0">置于<head>最前，禁用user-scalable=no；rem需JS动态计算，图片模糊需srcset，边框发虚需transform或SVG，务必真机全场景测试。
加了 viewport 标签但页面在手机上还是缩成一团、文字糊、左右可拖动？大概率不是模板问题，而是 viewport 没生效，或后续 CSS/JS 主动破坏了它。
viewport 必须写对且放对位置
浏览器解析 HTML 是顺序执行的，viewport 必须出现在 <head> 最前面，不能被 JS 动态插入，也不能被框架（如 Vue SSR）漏掉。常见错误包括：
- 用
document.head.appendChild()在DOMContentLoaded后补写——iOS Safari 和部分 Android WebView 直接忽略 - 在
<head>里写了两次，后一个覆盖前一个，但首次渲染已按错误配置执行 - 用了
width=375或width=1200这类固定值——折叠屏、iPad 分屏、横屏键盘弹出时全崩
最简有效写法只有一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。别加 user-scalable=no 或 maximum-scale=1.0，它们既不保证禁用缩放，又违反 WCAG 可访问性要求。
rem 基准不能靠媒体查询硬编码
用 rem 做字体和间距适配时，如果只靠 @media (max-width: 768px) { html { font-size: 14px; } } 这种写法，会在 iPad Pro（逻辑宽度 1024px）、安卓平板（800px）、折叠屏（展开后 1200px 仍需移动样式）上全部失效。
立即学习“前端免费学习笔记（深入）”；
真正可控的做法是 JS 动态设置：
function setRem() {
const baseWidth = 375; // 设计稿基准宽度
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = scale * 16 + 'px';
}
setRem();
window.addEventListener('resize', setRem);
window.addEventListener('orientationchange', setRem);注意两个坑：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- iOS 键盘弹出时
clientWidth不变，但视口被压缩，rem基准会“虚高”，输入框可能被顶出屏幕——需监听focus事件临时调小font-size - 某些安卓 WebView 不触发
resize，得配合matchMedia('(min-width: 0px)')监听变化
媒体查询断点要按内容容器设，不是按设备型号
写 @media (max-width: 767px) 模拟 iPhone，不如写 @media (min-width: 48em)（即容器 ≥ 768px）。因为：
- 很多安卓平板实际宽度是 800px 或 820px，硬卡 768px 会错失适配
- 折叠屏展开后逻辑宽度达 1200px，但 UI 仍需单栏布局——此时应看内容是否撑开，而不是像素值
-
@container查询比视口查询更精准（如@container (min-width: 400px)），但仅 Chromium 110+ 和 Safari 16.4+ 支持，降级方案是监听容器resize或用ResizeObserver
关键组件（如导航栏、卡片列表）建议单独封装容器查询逻辑，而不是全局一刀切。
图片和边框在高 DPR 屏上模糊不是 viewport 能解决的
viewport 只管 CSS 像素与物理像素的映射关系，它不负责让图片变清晰、边框变锐利。
常见问题和对应解法：
-
<img src="icon.png">在 2x 屏上拉伸模糊 → 改用srcset：<img src="icon.png" srcset="icon@2x.png 2x, icon@3x.png 3x"> -
border: 1px solid #ccc在 iPhone 13 上发虚 → 改用transform: scaleY(0.333)或 SVG 边框 - 背景渐变模拟细线 → 某些安卓低版本会锯齿，优先换为
border-image或 SVG
字体大小保持用 px 即可，现代浏览器对 font-size 的 DPR 处理已很稳定；强行转 rem 反而增加 JS 计算负担，还可能叠加系统字号放大导致失准。
真机测试比任何理论都管用：横竖屏切换、键盘弹起、分屏缩放、系统“更大字体”设置、深色模式下图片对比度——这些场景不跑一遍，再标准的响应式也会在某个用户手里无声崩掉。
