viewport meta 标签必须写为 ，其他参数如 user-scalable、maximum-scale 等非必要不加；CSS 应优先使用 rem、%、flex、grid 实现响应式，避免固定 px 值和 float；触控区域需满足最小尺寸（iOS 44×44px、安卓 48×48px），并兼顾无障碍与 touch-action 合理设置。
viewport meta 标签必须加，且不能写错
不加 <meta name="viewport">，手机浏览器默认按 980px 宽度渲染页面，文字小得看不清，缩放后布局全乱。加了但写成 width=device-width, initial-scale=1.0, maximum-scale=1.0 就等于禁了用户双指缩放——很多中老年用户依赖这个操作，别硬拦。
正确写法只用两个关键参数：width=device-width 和 initial-scale=1。其他如 user-scalable、minimum-scale 除非有强交互需求（比如地图类），否则一律不加。
-
width=device-width告诉浏览器用设备真实宽度，不是模拟桌面宽度 -
initial-scale=1确保页面加载时 1:1 显示，不自动缩放 - 别写
width=375或width=414—— 这是写死某款 iPhone 的宽度，安卓机直接失效
CSS 里别用固定 px 宽度做响应式
写 width: 320px 在 iPhone SE 上刚好，在 Pixel 7 上就只占半屏；更糟的是，用户横屏时整个布局卡死。真要控制尺寸，优先用 rem 或 %，配合根字体大小动态调整。
一个简单但有效的做法：在 上用 JS 设置 font-size，比如按屏幕宽度等比缩放，再让所有宽度、内边距都基于 rem。这样既不用写一堆媒体查询，又不会在大屏手机上撑爆容器。
立即学习“前端免费学习笔记（深入）”；
- 避免
max-width: 1200px这种桌面思维——手机根本不需要 1200px -
padding: 20px在小屏上会挤占太多内容空间，换成padding: 1rem更稳妥 - 图片别设
width: 100%却漏掉height: auto，否则会拉伸变形
flexbox 和 grid 比 float 更可靠
用 float: left 做多列布局，手机端几乎必然塌陷——因为没有清除浮动的上下文，而且 float 本就不支持响应式断点重排。现在主流机型都支持 display: flex 和 display: grid，兼容性不是问题（iOS 9+、Android 4.4+ 都行）。
重点不是“能不能用”，而是怎么用才不出错。比如 flex-wrap: wrap 必须显式声明，否则子项宁可溢出也不换行；grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 这种写法能自动适配不同宽度，比手写 media query 更干净。
- 别对
flex容器设width: 100%又加margin: 0 auto——它默认就撑满父容器 -
grid中的fr单位是“剩余空间份数”，不是像素，别和px混着写在同一行定义里 - 旧版 Android WebView（4.4）不支持
gap，用padding+margin模拟更稳
touch 事件区域太小，手指点不准
按钮写成 height: 24px; padding: 4px 8px，在手机上实际点击热区只有 32×32px 左右，远低于 iOS 推荐的 44×44px 和安卓的 48×48px 最小触控尺寸。用户反复点不中，第一反应是“网页坏了”，而不是“我手抖”。
解决方法不是盲目放大元素，而是用 min-height 和 padding 扩展可点击区域，同时保持视觉样式不变。CSS 里的 touch-action 也要留意——比如设成 touch-action: manipulation 能减少 iOS 上的 300ms 点击延迟，但千万别在需要滑动的轮播图容器上加，否则手势就失灵了。
- 链接或按钮至少保证
min-height: 44px，内边距补足视觉大小 - 别用
onclick绑定在<div> 上却不加 <code>role="button"和tabindex，否则无障碍访问直接失败 - 表单输入框的
font-size小于 16px，iOS 会自动缩放页面，破坏布局
事情说清了就结束。真正难的不是写几个媒体查询，而是判断哪些地方“看起来没问题”，其实已经在悄悄伤害触控体验。
