响应式网站移动端显示过宽需手动缩放问题排查求助

以下是可按优先级逐一排查的原因和对应修改方案：

• 首先验证viewport meta标签配置是否完全符合规范，很多场景下看似配置正确实际存在拼写错误、属性值格式问题。正确的配置应为：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

  注意不要出现多余空格、属性名拼写错误，部分老旧移动浏览器对格式容错率极低，微小错误就会导致适配失效。
• 排查页面内是否存在超出视口宽度的固定宽元素，父元素overflow为visible时这类元素会把整体页面宽度撑大。可以在浏览器控制台执行以下代码快速定位问题元素：

  [...document.querySelectorAll('*')].forEach(el => { 
    if(el.offsetWidth > document.documentElement.offsetWidth) console.log('超出宽度的元素：', el, '宽度值：', el.offsetWidth) 
  })
  

  定位到对应元素后将其固定宽度修改为相对单位，或者给父元素添加overflow-x: hidden即可。
• 排查盒模型配置问题，如果给元素设置了width: 100%同时又添加了左右内边距、边框，未开启border-box的情况下元素实际宽度会超过100%撑破容器。可以在CSS全局添加如下规则统一盒模型：

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  

• 排查媒体资源的自适应配置，未设置最大宽度的图片、视频、iframe等资源如果原始尺寸过大会直接撑宽页面。可以添加全局规则处理：

  img, video, iframe {
    max-width: 100%;
    height: auto;
  }
  

• 排查根节点溢出配置，部分使用负margin、transform位移实现的动效/交互如果没有限制横向溢出也会导致页面整体宽度变大，可以给根节点添加溢出限制：

  html, body {
    overflow-x: hidden;
  }
  

内容的提问来源于stack exchange，提问作者Mohammed Bhanpurawala