手机页面一打开就能横向拖动，导航挤成两行，或图片把正文撑出屏幕？这类问题在网页制作中很常见，通常不必先重写整页。先确认页面视口，再检查响应式布局的断点和图片原始尺寸，往往能缩小排查范围。
先判断是整页溢出，还是单个模块错位
用浏览器开发者工具切换到手机模拟视图，分别查看约 320、375、390 和 430 像素宽度。它们可作为常见屏幕宽度的检查点，不代表所有手机的实际可用宽度；浏览器工具栏、缩放和设备设置也会影响显示。先缩小到问题出现的宽度，再观察是整页横向滚动，还是某张图片、表格或导航单独越界。
检查文档是否包含正确的视口声明：width=device-width, initial-scale=1。缺少这一设置时，手机浏览器可能按较宽的虚拟页面布局，导致媒体查询表现与预期不同。确认后，在开发者工具的元素面板查看异常元素的盒模型，留意固定宽度、左右外边距和子元素最小宽度。
布局断点不合适时，按内容而不是机型调整
断点是媒体查询切换样式的宽度条件，不是必须照搬的设备型号。常见项目会在约 600 至 800 像素附近设置一处调整，但具体位置应由内容决定：当导航放不下、卡片变得过窄，或双栏阅读困难时，再改为单栏或折叠导航。
- 找到切换点：在开发者工具中逐渐缩窄视口，记录布局首次拥挤的宽度。
- 检查媒体查询：确认相关样式没有被后写的规则覆盖，也没有为同一组件设置互相冲突的条件。
- 处理固定尺寸：将内容区的固定宽度改为弹性宽度；使用网格时，可考虑 minmax(0, 1fr)，避免网格子项的最小内容宽度把列撑开。
- 复测边界：除了断点两侧，也查看较窄手机和较宽手机，确认布局切换时没有突然跳动或留白。
若两个栏目在手机上仍并排，先判断是否真的需要并排。文字、表单等内容通常适合堆叠；图片缩略图则可保留多列，但要确保每列有足够空间。不要只为某一款手机写死宽度，后续屏幕变化时容易再次错位。
图片尺寸与容器比例要一起检查
图片文件本身很宽，不代表它一定会撑破页面，关键是显示规则和外层容器。常见内容图片可设置最大宽度为 100%、高度自动，让它按原比例缩放。若卡片要求统一视觉比例，可给图片容器设定比例，并使用 object-fit: cover；这种方式会裁切边缘，不适合必须完整展示的图表、截图或商品细节。
还要检查图片是否被包在固定宽度的元素中，以及图片旁的说明文字是否设置了过大的最小宽度。开发者工具中暂时关闭相关宽度规则，若横向溢出随即消失，就能进一步锁定问题。表格、代码片段等宽内容则可单独安排横向滚动，不要让整个页面跟着溢出。
按这个顺序快速修复并复核
- 确认视口声明、页面缩放比例和实际出错宽度。
- 在元素面板定位超出视口的节点，沿父级向上检查固定宽度、内边距和溢出设置。
- 核对媒体查询的生效范围，按内容需要调整断点及单栏、双栏规则。
- 检查图片最大宽度、比例和容器限制，再排查表格、长链接等宽内容。
- 在多个宽度下复测，并用真实手机确认触控、阅读和导航操作正常。
如果本地显示正常、发布后却错位，再确认线上是否加载了最新样式文件，并检查缓存或不同页面模板是否使用了另一套 CSS。需要部署网站或排查主机环境时，可把服务器配置与前端样式分开核对；有这类托管需求的读者可以了解德讯电讯的服务范围，再按服务器位置、管理方式和支持内容自行比较。它不能代替对断点和图片规则的修复。
常见问题
手机端横向滚动一定是图片造成的吗？
不一定。固定宽度容器、长链接、表格、网格子项的最小宽度都可能导致溢出，应先定位超出视口的元素。
断点应该直接设为手机屏幕宽度吗？
不必。断点应对应内容开始拥挤的位置；常见宽度只能作为初始检查参考，项目布局不同，合适位置也会不同。
图片设置宽度 100% 后变形怎么办？
检查高度是否也被固定。保持原比例时可让高度自动；需要填满固定比例容器时再考虑裁切方式。
改完电脑端会不会受影响？
可能会。调整共享样式后，应同时复测手机、平板和桌面宽度；必要时把规则限制在对应媒体查询内。
处理手机错位时，网页制作应先定位溢出来源，再调整断点和图片显示规则，而不是盲目增加媒体查询。完成多宽度复测，才能确认页面在不同屏幕上都保持可读、可操作。