React移动端应用禁用横向滚动问题排查与解决

核心解决方案： #

• 添加viewport元标签
  移动端页面必须在HTML的<head>中加入该标签，确保页面适配设备宽度，避免初始布局溢出：

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

• 替换100vw为100%并启用盒模型
  100vw会包含浏览器垂直滚动条的宽度，导致元素超出视口范围。改用100%，同时给所有元素设置盒模型，确保padding和border不会额外增加元素宽度：

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .footer {
    width: 100%; /* 替换原有的width:100vw */
    position: relative;
    bottom: 0;
    left: 0;
    height: 100px;
    background-color: gray;
    text-align: center;
  }
  

• 全局锁定横向溢出
  在html和body层级同时禁用横向滚动，覆盖所有页面的溢出情况：

  html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  

• 处理长文本/溢出元素
  页面中的长下划线或文本可能强制撑开容器，添加以下样式限制宽度并自动换行：

  .Contact-content .divider {
    overflow-wrap: break-word;
    max-width: 90%; /* 留出左右边距避免贴边 */
    margin: 0 auto;
  }
  

• 修正组件结构错误
  React代码中存在<p>标签嵌套<div>/<p>的语法错误，浏览器会自动修正DOM结构，可能引发布局异常，调整后的结构如下：

  import React from "react";
  import './contact.css'
  
  const navbarFont = {
      fontFamily: "Times-Italic",
    };
  
  const Contact = () => {
      return (
          <div className='Contact-header' style={navbarFont}>
              <h1 style={navbarFont}>Contact</h1>
              <div className='Contact-content'>
                  <div className='Contact'>Call us.</div>
                  <div className='divider'>_____________________</div>
              </div>
  
              <div className="footer" style={navbarFont}>
                  <div>____________________</div>
              </div>
          </div>
      );
  };
  
  export default Contact;
  

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