响应式页面元素宽度异常求助：部分浏览器内容未占满屏幕

核心排查与修复方案（针对全页面异常+浏览器差异） #

1. 补全Viewport元标签（最关键修复） #

React项目中，若public/index.html未配置viewport，部分Chromium内核浏览器（如Edge/Brave）在小分辨率下会出现布局适配异常。需在<head>中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 重置全局默认样式 #

不同浏览器对html、body的默认边距/内边距处理存在差异，需在全局CSS（如index.css）中统一重置：

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 消除横向滚动条导致的视觉留白 */
  box-sizing: border-box;
}

* {
  box-sizing: inherit; /* 让所有元素继承盒模型，避免padding/border撑开宽度 */
}

3. 检查根容器的宽度限制 #

若项目根组件（如App.js）存在固定宽度的容器（例如width: 1200px），会导致小屏无法自适应。需调整为：

.app-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

当前Contacto组件的辅助优化 #

1. 修正main元素的盒模型，避免padding超出父容器：

main {
  padding: 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

2. 修复图片路径（React生产环境中直接写/src/assets会失效）：

// 先导入图片
import mapa1 from "../assets/mapa1.png";

// 组件内使用
<img src={mapa1} alt="Sede地图" />

验证流程 #

1. 先添加viewport元标签，刷新页面测试
2. 应用全局样式重置，检查Edge/Brave的显示效果
3. 排查根组件的容器宽度设置

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