如何仅让未适配小屏的旧网站Header实现响应式适配？

关于媒体查询/容器查询的生效问题 #

缺少<meta name="viewport">标签时，浏览器会使用默认布局视口（通常为980px左右，比如iPhone上的默认值），此时媒体查询的max-width/min-width是基于这个布局视口宽度，而非设备实际物理宽度。所以常规的移动端媒体查询（如max-width:768px）不会触发——因为布局视口远大于设备小屏宽度。容器查询依赖元素的实际渲染尺寸，同样会因为布局视口的存在，无法按设备小屏的预期触发。

方案1：不添加viewport标签，用JS动态切换Header样式 #

通过JavaScript检测设备类型，给Header添加移动端专属类名，再通过CSS针对该类名编写响应式样式，完全不影响页面其他部分。

步骤：

1. JS设备检测与类名控制

// 简单判断移动设备（可根据需求调整阈值或检测规则）
function isMobileDevice() {
  return window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 页面加载时设置类名
const header = document.querySelector('.site-header');
if (isMobileDevice()) {
  header.classList.add('mobile-header');
}

// 可选：窗口缩放时重新判断
window.addEventListener('resize', () => {
  isMobileDevice() ? header.classList.add('mobile-header') : header.classList.remove('mobile-header');
});

2. CSS样式调整

/* 原有桌面端Header样式保持不变 */
.site-header .desktop-menu {
  display: flex;
}
.site-header .hamburger,
.site-header .modal-menu {
  display: none;
}

/* 移动端Header专属样式 */
.site-header.mobile-header .desktop-menu {
  display: none;
}
.site-header.mobile-header .hamburger {
  display: block;
  cursor: pointer;
  font-size: 24px;
  padding: 10px;
}

/* 模态菜单样式 */
.site-header.mobile-header .modal-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.site-header.mobile-header .modal-menu.active {
  display: block;
}
.modal-menu ul {
  list-style: none;
  padding: 0;
}
.modal-menu ul li {
  margin: 15px 0;
}

3. 汉堡图标交互逻辑

document.querySelector('.hamburger').addEventListener('click', () => {
  document.querySelector('.modal-menu').classList.toggle('active');
});

方案2：添加viewport标签，固定主内容区域宽度 #

添加viewport标签让媒体查询正常工作，同时给页面非Header的主内容设置固定宽度（与原布局视口一致），确保其他部分保持原有显示效果，仅Header做响应式适配。

步骤：

1. 添加viewport标签
   在页面<head>中插入：

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

2. 固定主内容宽度
   找到页面的主内容容器（如#main-content、.page-container），添加CSS：

/* 让主内容保持原网站的默认布局宽度，居中显示 */
#main-content {
  width: 980px; /* 替换为原网站的实际布局宽度 */
  margin: 0 auto;
  overflow-x: auto; /* 小屏上允许横向滚动，避免内容错乱 */
}

/* 若有多个分散内容容器，统一设置 */
.page-content, .sidebar, .footer {
  max-width: 980px;
  margin: 0 auto;
}

3. Header的媒体查询样式

/* 桌面端样式保持不变 */
.site-header .desktop-menu {
  display: flex;
}
.site-header .hamburger,
.site-header .modal-menu {
  display: none;
}

/* 移动端媒体查询触发样式 */
@media (max-width: 768px) {
  .site-header .desktop-menu {
    display: none;
  }
  .site-header .hamburger {
    display: block;
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
  }
  .site-header .modal-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    display: none;
  }
  .site-header .modal-menu.active {
    display: block;
  }
}

4. 汉堡图标交互逻辑
   同方案1的点击代码即可。

方案对比 #

• 方案1：无需修改viewport，对现有页面零侵入，但设备判断逻辑可能存在边界情况（如平板），窗口缩放时的适配灵活性稍差。
• 方案2：媒体查询精准可靠，适配逻辑更标准，但需要确保主内容容器选择正确，避免遗漏导致页面错乱。

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