viewport标签错误导致缩放失效，必须写为<meta name="viewport" content="width=device-width, initial-scale=1.0">并置于<head>中；避免px单位，用rem/em配合clamp动态根字号；媒体查询统一用min-width递进写法；图片设max-width:100%；按钮组用flex+gap；禁用overflow:hidden以免拦截Safari双击放大。
viewport 标签写错直接导致缩放失效
浏览器根本没启动响应式逻辑，所有媒体查询、rem 计算、flex 布局都会被跳过。最常见错误是拼写错误（intial-scale）、漏掉 width=device-width，或加了 maximum-scale=1.0 锁死双指缩放。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是唯一可靠写法，必须放在<head>内，且不能被 JS 动态修改（Webview 中尤其无效） - 删掉所有
user-scalable=no和maximum-scale—— 它们会直接禁用辅助技术依赖的缩放能力 - 检查是否误用
file://协议打开本地 HTML：部分浏览器（尤其是 Chrome）在此协议下会忽略 viewport 或强制应用 DPI 缩放补偿
字体与间距单位混用引发层级塌陷
当用户把浏览器缩放到 200% 或 300%（常见于视力障碍用户），px 值完全失去弹性，而 rem 若未配合根元素动态重设，也会卡死在初始值。
- 避免在关键布局中使用
px：按钮内边距、行高、卡片圆角、文字阴影等全部改用rem或em - 给
html元素设置可缩放根字号：html { font-size: clamp(1rem, 2.5vw, 1.25rem); }，确保小屏不撑破、大缩放不糊字 - 慎用
transform: scale()模拟放大——它会让点击坐标偏移、屏幕阅读器无法识别新尺寸、固定定位元素脱出视口
媒体查询断点在缩放后“消失”
缩放 150% 时，原本 @media (max-width: 768px) 的触发点实际变成 512px 视口宽度，导致样式未生效；更糟的是，max-width 和 min-width 混用会在 767.5px 这类亚像素值下留白失效。
- 统一用
min-width递进写法，从移动优先开始，避免嵌套套娃：@media (min-width: 768px) { ... }而非@media (max-width: 767px) { ... } - 断点不要抄设备尺寸，用 Chrome DevTools 拖动宽度滑块，记录内容自然折行/文字拥挤/按钮堆叠的真实像素值（如 623px、892px），再取整为 640px、900px
- 对关键交互区域（如导航栏、表单控件）额外加一层
@media (min-resolution: 2dppx)适配高 DPI 屏幕缩放补偿
图片和按钮在高倍缩放下溢出或错位
固定宽高的 <img> 或绝对定位的按钮，在 200% 缩放下会突破容器边界，甚至被截断；更隐蔽的问题是 display: inline-block + margin-right 排列的按钮组，缩放后间隙失真、换行错乱。
立即学习“前端免费学习笔记（深入）”；
- 所有图片必须带
max-width: 100%; height: auto;，禁止设width: 300px这类固定值 - 按钮组改用
display: flex; gap: 1rem;替代margin-right，gap是相对单位，缩放时自动缩放 - 避免
position: absolute配合left: 20px定位关键操作按钮——缩放后它会脱离预期位置，改用margin-left: auto或text-align: right配合父容器流式布局
overflow: hidden 对 Safari 双击放大行为的静默拦截——哪怕 viewport 正确、字体可缩，只要根容器或主体区域设了这个，iOS 用户就再也点不了两下放大局部内容。 
