先确认视口与基础缩放
多数模板移动端显示异常，根源是缺少视口声明。检查 中是否有：
若模板用固定宽度（如 width:1200px），手机浏览器会缩小整页，导致字体过小。把容器宽度改为 max-width:1200px; width:100%，并移除 body 上的固定像素宽度。
用媒体查询处理断点
不要凭感觉设断点。打开浏览器开发者工具，切换设备模式，从 320px 开始逐级拉宽，记录布局开始错位的宽度。常见断点参考：
- 768px：平板竖屏
- 480px：大屏手机
- 360px：主流安卓机
在 CSS 末尾追加覆盖规则，避免改动模板核心文件：
@media (max-width:768px){
.sidebar{display:none}
.card{width:100%}
}
触控目标与字号
移动端按钮和链接的可点击区域建议不小于 44×44px。模板中常见的“小箭头”“文字链”往往只有十几像素高。用 padding 扩大点击区，不要只放大图标。正文字号不低于 16px，行高 1.6 左右，否则 iOS 会自动放大页面。
图片与表格适配
给内容图片加 max-width:100%; height:auto。表格在窄屏会撑破容器，可包裹一层 overflow-x:auto 的 div，让表格横向滚动而不是压缩变形。背景图使用 background-size:cover 并设置最小高度，避免文字被裁切。
真机调试与常见坑
开发者工具模拟无法完全替代真机。用手机访问局域网 IP 测试，重点检查：
- 固定定位元素是否遮挡内容
- 输入框聚焦时键盘弹出是否顶飞布局
- 横屏下导航是否错位
若模板使用 100vh，iOS 地址栏会导致高度计算偏差，改用 100dvh 或 min-height:100vh 兜底。
收尾检查清单
- 视口声明存在且无
user-scalable=no - 无横向滚动条
- 所有可点元素间距足够
- 字体在 320px 下不溢出
- 表单输入类型正确（
type="tel"、type="email"）
按以上顺序排查，多数模板无需重构即可完成移动端适配。
