模拟移动端浏览器时如何避免部分元素将div撑至非预期宽度

根因定位 #

经过模拟移动端视口测试，问题由以下几点触发：

• 页面头部未配置正确的移动端视口元标签，移动端浏览器默认按桌面端宽度渲染，导致自适应规则失效
• 页脚联系信息模块设置了固定宽度，窄视口下宽度超出父容器限制，直接撑大外层公共容器
• 作品集卡片网格未做移动端适配，固定多列布局在视口宽度不足时横向溢出

修复步骤 #

1. 配置视口元标签
   在页面<head>标签内插入如下代码，强制浏览器按设备实际宽度渲染：

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

2. 增加容器溢出兜底规则
   给全站公共容器添加宽度限制，避免单个元素撑宽整页：

.container {
  max-width: 100% !important;
  overflow-x: hidden;
}

3. 适配页脚移动端样式
   添加媒体查询调整页脚布局：

@media (max-width: 768px) {
  #colophon .contact-wrapper {
    width: 100%;
    flex-direction: column;
  }
}

4. 调整作品集网格适配规则
   窄视口下改为单列布局：

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-card {
    width: 100%;
  }
}

验证方式 #

修复完成后，打开浏览器开发者工具切换移动端模拟模式，拖动调整视口宽度从320px到1200px，确认页面无横向滚动条、右侧无空白区域即可。

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