手机网页适配：先修视口，再处理横向溢出
手机上整页缩小或左右滑动，不一定是字号问题。本文从视口设置、固定宽度和长内容三个位置检查，让博客布局真正适应窄屏。
先让布局宽度与设备对应
手机网页适配先检查页面head中的viewport设置。常见基础配置让视口宽度与设备的CSS像素宽度对应，再通过响应式布局安排内容。不要通过禁止缩放来掩盖小字问题，读者仍需要放大文字。
打开手机宽度预览，分别检查首页、文章和后台表单。若整页像桌面截图一样缩小，先查视口；若只有局部撑开，则寻找固定宽度容器、大表格、长链接和代码块。不要把所有元素统一设置溢出隐藏，否则可能把按钮和正文一起裁掉。
按内容决定换行与滚动
主内容容器应留有合理边距，卡片和图片随可用宽度收缩。长代码或表格可以在自身区域横向滚动，普通文字与网址则按合适规则换行。导航窄屏下可以折叠，但分类名称和入口仍应清楚，不能仅靠鼠标悬停操作。
验收不只看一种手机尺寸，应覆盖窄屏、较宽手机和桌面，并测试横竖屏、文字放大与键盘弹出后的表单。实际点击搜索、菜单和提交按钮，确认没有被固定底栏遮挡。保留出现溢出的具体元素和修复规则，后续增加长标题时复测，比单纯缩小全站字体更有利于长期维护。
官方参考
资料核对日期：2026年10月26日。
本文新增价值
手机上整页缩小或左右滑动，不一定是字号问题。本文从视口设置、固定宽度和长内容三个位置检查，让博客布局真正适应窄屏。本文补充适用边界、输入对照与验收方法；操作建议为综合整理，未将官方示例当成本网站实测结果。
手机上整页缩小或左右滑动，不一定是字号问题。本文从视口设置、固定宽度和长内容三个位置检查，让博客布局真正适应窄屏。本文补充适用边界、输入对照与验收方法；操作建议为综合整理，未将官方示例当成本网站实测结果。