iOS 16横屏网页适配问题：顶部栏无法铺满浏览器窗口

1. 修复HTML标签的重置样式 #

你当前给html设置了all: unset，这会清除浏览器默认的宽度、边距等关键样式，是导致iOS16横屏下宽度异常的核心原因之一。替换为明确的重置样式：

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

2. 优化Viewport Meta标签 #

添加viewport-fit=cover属性，强制页面覆盖iOS设备的整个屏幕区域，包括安全区域：

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

3. 统一盒子模型并明确宽高 #

给body和容器添加box-sizing: border-box，避免内边距/边框导致宽度溢出，同时确保元素占满可用宽度：

body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#page_wrapper_div {
  min-width: 320px;
  width: 100%;
  position: relative;
  margin: 0;
  box-sizing: border-box;
}

（注：移除了#page_wrapper_div的margin-left: auto; margin-right: auto;，因为这会让容器在宽于320px时居中，反而可能导致边缘间隙）

4. 适配iOS安全区域（可选） #

如果上述步骤后仍有间隙，说明是iOS横屏的安全区域限制，给顶部栏添加负边距和内边距适配：

#topBar {
  display: block;
  position: relative;
  width: 100%;
  /* 让顶部栏延伸到安全区域外 */
  margin-left: calc(-1 * env(safe-area-inset-left));
  margin-right: calc(-1 * env(safe-area-inset-right));
  /* 确保内部内容不被安全区域遮挡 */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

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