网页迁移至XAMPP后无法自适应电脑屏幕尺寸问题求助

按以下步骤逐一排查修复：

1. 确认viewport元标签的标准写法 #

先确保<head>里的viewport标签没有多余属性，核心配置必须正确：

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

如果需要禁止用户手动缩放，可以补充maximum-scale=1.0, user-scalable=no，但前两个属性是自适应的核心，不能缺失。

2. 修正layout.css的全局宽度限制 #

打开layout.css，优先排查全局容器的宽度设置：

• 移除body或全局容器的固定超大宽度（比如width: 2000px），替换为：

  body {
    width: 100%;
    max-width: 100vw; /* 强制限制最大宽度为当前视口宽度 */
    overflow-x: hidden; /* 隐藏横向滚动条 */
  }
  

• 若用了wrapper容器，设置合理的最大宽度并居中：

  #wrapper {
    width: 90%;
    max-width: 1200px; /* 大屏下内容不会过宽 */
    margin: 0 auto;
  }
  

3. 统一全局盒模型 #

在layout.css最顶部添加盒模型重置，避免padding/border撑大元素导致溢出：

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

4. 排查溢出的具体元素 #

用浏览器开发者工具（F12）逐个检查元素：

• 图片：给所有图片添加max-width: 100%; height: auto;，防止固定宽度超出视口
• 表格：设置table { width: 100%; table-layout: fixed; }，避免表格过宽
• 绝对/固定定位元素：检查left/right属性，不要出现right: -100px这类导致溢出的写法

5. 强制刷新清除缓存 #

XAMPP环境下浏览器可能缓存旧CSS，按Ctrl+F5强制刷新页面，确保加载最新的layout.css

6. 移除全局缩放属性 #

排查layout.css中是否存在全局缩放设置，比如：

body {
  transform: scale(1.2);
  zoom: 120%;
}

若有，直接删除或改为scale(1)/zoom: 100%

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