移动端页面总是左右滑动？检查 viewport 设置是否覆盖了屏幕
如果移动端页面出现左右滑动现象，通常是因为 viewport 设置未覆盖屏幕宽度，导致内容宽度大于屏幕宽度。
确认 viewport 的 width 属性是否等于 device-width
移动端页面出现左右滑动，根本原因通常是 viewport 的 width 属性没有设置为 device-width。浏览器在渲染页面时，会根据 viewport 的宽度来决定内容的布局区域。如果设置的宽度大于屏幕实际宽度，或者使用了固定的像素值（如 width=980），内容就会超出屏幕可视范围，从而产生横向滚动条。MDN 文档指出，viewport 的 width 属性控制视口的最小像素宽度，可以设置为 device-width 来匹配设备屏幕的物理尺寸。
检查这一点的具体操作是打开网页的 HTML 源代码，查找 <meta name='viewport'> 标签。确认其 content 属性中是否包含 'width=device-width' 这一项。如果该项缺失，或者被设置成了具体的数值（如 width=600），就需要将其修改为 device-width。这一步是解决布局溢出和滑动问题的核心，确保浏览器以屏幕的实际宽度作为布局基准。
验证 initial-scale 设置是否导致页面被意外缩放
除了 width 属性，initial-scale 的设置也会影响页面在屏幕上的显示宽度。如果 initial-scale 设置为大于 1 的数值，浏览器会放大页面内容，这可能导致原本适配屏幕的布局变得过宽，从而引发左右滑动。MDN 提到，initial-scale 定义了设备宽度与视口大小的比率，虽然现代浏览器对默认缩放的处理有所改进，但在自定义缩放比例时仍需谨慎。
验证这一点的复现步骤是：在浏览器开发者工具中切换到移动设备模式，查看当前页面的缩放比例。如果页面显示的宽度明显大于屏幕宽度，尝试将 initial-scale 设置为 1.0。如果修改后左右滑动消失，说明问题出在缩放比例上。建议保持 initial-scale 为默认值或 1.0，除非有特殊的全屏展示需求，否则不应随意调整缩放以避免破坏布局。
排查媒体查询断点是否与 viewport 宽度冲突
当 viewport 设置正确时，如果页面仍然出现滑动，可能是 CSS 中的媒体查询断点与 viewport 的宽度定义发生了冲突。例如，如果 viewport 设置为 device-width，但 CSS 中定义了 @media (max-width: 480px) 的样式，且该样式强制设置了内容宽度为 600px，就会导致布局溢出。MDN 文档提到，viewport 的宽度会建立 vw 单位的基准，媒体查询应基于此基准进行响应式设计。
排查这一点的操作是：使用浏览器开发者工具的设备模拟功能，逐个测试不同的断点。检查在各个断点下，是否有样式规则强制设置了元素的宽度或最大宽度。如果发现冲突，需要调整 CSS 中的断点数值，使其与 viewport 的宽度逻辑保持一致。确保媒体查询的断点是基于设备屏幕宽度而非固定的像素值，从而保证布局在不同设备上的一致性。
使用浏览器开发者工具验证最终布局结果
完成上述设置调整后，必须通过开发者工具验证最终的布局结果。在开发者工具的 Elements 面板中，选中页面的根元素或主要容器，查看其计算后的样式宽度。如果计算宽度等于屏幕宽度，且没有出现横向滚动条，说明 viewport 设置已经正确覆盖了屏幕。MDN 强调，viewport 是内容可见区域的指南，确保其大小正确是布局优化的基础。
判断结果的方法是：在开发者工具中切换到移动设备模式，并模拟不同的设备尺寸（如 iPhone SE, iPad 等）。观察页面在不同尺寸下是否都能正常显示，没有出现左右滑动或内容被截断的情况。如果所有测试设备下布局均正常，且计算宽度与设备宽度一致，则说明问题已解决。反之，则需要重新检查 width 和 initial-scale 的具体数值。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。