光靠改width或加meta viewport不足以真正适配手机，必须组合控制视口、容器行为、图片缩放和断点逻辑；漏掉任意一环会导致横向滚动、文字过小、按钮点不中、图片溢出等问题。
直接说结论：光靠改 width 或加个 meta viewport 不足以让 HTML 模板真正适配手机，必须组合控制视口、容器行为、图片缩放和断点逻辑——漏掉任意一环，小屏上就会出现横向滚动、文字过小、按钮点不中、图片溢出等问题。
viewport 元标签必须写对，且位置不能错
很多模板只写 <meta name="viewport" content="width=device-width">，但实际需要三项关键参数：
-
width=device-width：让视口宽度等于设备物理宽度（不是默认 980px） -
initial-scale=1.0：禁用页面加载后自动缩放 -
user-scalable=no要慎用——它会禁用双指缩放，影响可访问性，除非是纯展示型后台页
这个 <meta> 标签必须放在 <head> 最前面，且在所有 CSS <link> 之前。否则 iOS Safari 可能先按桌面宽度渲染一次，再重排，造成闪动或布局错乱。
flex 容器居中图片时，父容器高度必须可控
用 display: flex + justify-content: center + align-items: center 居中图片很常见，但在手机上常失效，原因不是写法错，而是父容器没高度参照：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器是
<section>或<div>且没设min-height，iOS Safari（尤其 9–11）会在图片加载前就完成渲染，此时交叉轴长度为 0，align-items: center彻底无效 - 推荐写
min-height: 100vh而非height: 100vh，避免内容撑高后出现底部空白或滚动错位 - 别把
display: flex直接加在<body>上——它会让所有直系子元素变成 flex item，导航栏、页脚全乱套
图片自身只需 max-width: 90vw + height: auto，不要设固定 width 或 height。
媒体查询断点要按容器宽度设，不是按设备型号
写 @media (max-width: 767px) 看似合理，但实际问题很多：
- 平板横屏时宽度可能超 1024px，但内容容器实际只有 600px 宽，此时样式不该触发
- 现代做法是按内容容器断点：比如主内容区
.main宽度降到 48em（768px）以下才切样式 - 断点内只重写变化的属性，比如只改
flex-direction或隐藏侧边栏，不要整套重写字体、padding、margin - 如果在断点里切换了父容器的
display类型（如从block改为flex），记得同步删掉已失效的text-align: center
响应式图片不能只靠 max-width: 100%
img { max-width: 100%; height: auto; } 是基础，但手机端还有三个隐藏问题：
- 大图在弱网下加载慢，首屏白屏时间长——得配合
srcset和sizes提供不同分辨率资源 - 竖屏手机显示宽图时，
max-width: 100%会让图片被压缩变形，应加object-fit: cover（注意 iOS Safari 10+ 才完全支持） - 某些安卓 WebView 对
max-width解析异常，建议外层再包一层<div class="img-wrapper">并设overflow: hidden
最易被忽略的是：图片加载前，容器高度为 0，flex 垂直居中失效；而加载后高度突变又可能引发页面抖动——这时候用 aspect-ratio（现代浏览器）或 padding-top 占位更稳。
