移动端网页出现X轴溢出的原因排查求助

一、补全全局盒模型设置 #

你的CSS开头的盒模型规则缺失了*选择器，这会导致所有元素的宽度计算错误（padding会额外撑大元素），是溢出的核心原因之一。修改为：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 2px solid red; /* 保留调试用的红色边框 */
}

把原来单独的* {outline: ...}合并到这个规则里，避免重复定义。

二、限制根元素横向溢出 #

仅给body设置overflow-x: hidden不够，需要同时给html添加，确保整个文档不会出现横向滚动：

html, body {
  background-color: #F1EFEC;
  height: 100%;
  scroll-behavior: smooth;
  font-family: Arial, sans-serif;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 新增这一行 */
}

移动端媒体查询里的body {overflow-x: hidden}可以保留，但全局设置更稳妥。

三、优化代码块的换行逻辑 #

你的pre标签内的代码带有大量前导空格，在小屏幕下容易超出容器。调整pre样式强制内容换行：

pre {
  white-space: pre-wrap;
  word-wrap: break-word; /* 新增：强制长代码/单词换行 */
  max-width: 100%;  
  overflow-x: auto;
  background-color: #D4C9BE; 
  padding: 10px; 
  border-radius: 5px; 
}

同时可以手动减少pre内代码的前导空格（比如从4个缩进到2个），进一步节省横向空间。

四、处理移动端大标题的溢出 #

移动端中#navbar header的font-size: 3rem在极小屏幕（如320px宽度）下，长标题可能超出容器，添加强制换行：

@media (max-width: 430px) {
  #navbar header {
    font-size: 3rem;
    font-weight: 700;
    word-break: break-word; /* 新增：标题过长时自动换行 */
  }
}

五、排查其他潜在问题 #

• 确保所有块级元素没有设置固定宽度（如width: 500px），仅使用max-width: 100%或相对宽度
• 检查main-section的padding设置，1.5%的内边距在小屏幕下不会溢出，但如果是固定值（如padding: 20px）需要配合box-sizing: border-box使用

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