viewport meta 标签必须正确添加在 head 中，格式为，禁用 user-scalable=no；CSS 应优先使用 rem 或 vw 替代 px；图片需配合 srcset/sizes 与 max-width:100%、height:auto；布局推荐 flexbox。
viewport meta 标签必须加，且不能写错
移动端 HTML 渲染依赖浏览器对视口的识别，没加或写错 <meta name="viewport">，页面会默认以桌面宽度（通常是 980px）缩放显示，文字小、按钮难点。常见错误包括漏掉 content 属性、拼错 width=device-width、多写了空格或用了中文引号。
- 必须写在
内，且放在其他 CSS/JS 引入之前 - 正确写法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要加
user-scalable=no（禁用缩放），它违反 WCAG 可访问性要求，iOS Safari 在某些版本下还会强制忽略整条 meta - 如果项目需适配老 Android（4.3 及以下），可补上
maximum-scale=1.0，但现代项目基本不需要
用 rem 或 viewport 单位替代 px，别硬写固定像素
直接写 font-size: 16px 或 width: 300px 在手机上会失真：小屏挤成一团，大屏留白太多。CSS 中的 px 是设备无关像素，但不随屏幕物理尺寸变化，而用户实际需要的是“视觉上一致的大小”。
- 推荐用
rem：根元素html的font-size动态设置（如 JS 计算document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'），其余尺寸按设计稿比例换算 - 更轻量的替代是
vw：比如标题字号写font-size: 4.26vw（对应 375px 设计稿下的 16px），但注意 iOS Safari 对小字号vw渲染有最小限制（约 11px） - 绝对避免在布局中大量使用
px固定宽高，尤其是按钮、行高、边距这类影响交互的属性
图片和媒体查询得配合 srcset 与 min-width
<img src="a.jpg" alt="html语句的应用_网页html语句转手机端适配法【指南】" > 在高清屏上模糊，在小屏上又浪费带宽。单靠 CSS max-width: 100% 只解决溢出，不解决资源加载逻辑。
- 用
srcset+sizes让浏览器自己选图：<img src="a-375w.jpg" srcset="a-375w.jpg 375w, a-750w.jpg 750w" sizes="(max-width: 375px) 375px, 750px" alt="html语句的应用_网页html语句转手机端适配法【指南】" > - 媒体查询别只写
@media (max-width: 768px)，优先用min-width（如@media (min-width: 768px)），避免小屏样式被大屏 CSS 覆盖 - 图片容器必须设
max-width: 100%和height: auto，否则srcset切换后可能拉伸变形
flexbox 布局比 float 和 inline-block 更可靠
float 在移动端容易触发怪异清除行为，inline-block 元素间有看不见的空白间隙，两者都难控制垂直居中和等分布局。
立即学习“前端免费学习笔记（深入）”；
- 所有横向排列容器统一加
display: flex，用flex-wrap: wrap处理折行，justify-content控制主轴对齐 - 等分列推荐
flex: 1而非width: 33.33%，后者在 border/padding 下易溢出，flex会自动减去 - iOS Safari 旧版（flex: 1 支持不全，可降级为
flex: 1 1 0，或加min-width: 0防止内容撑开
实际做适配时，最常被忽略的是：viewport meta 的引号用了中文全角、rem 计算没监听 orientationchange 导致横屏错乱、以及图片没设 height: auto 导致比例塌陷。这些细节不报错，但一上线就明显不对。
