iOS Safari/Chrome移动端元素宽度超出390px限制问题求助

1. 修正Viewport标签配置 #

iOS设备对viewport解析要求严格，替换现有viewport标签为：

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

若允许用户手动缩放，可移除maximum-scale=1.0，但必须保留width=device-width和initial-scale=1.0。

2. 限制body的横向溢出 #

给body添加样式，避免页面横向滚动导致子元素被异常拉伸：

body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
}

3. 修复目标元素的宽度计算逻辑 #

更新#element的样式，确保盒模型和宽度约束生效：

#element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 390px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto; /* 桌面端自动居中 */
}

box-sizing: border-box可确保内边距、边框不会超出设置的宽度限制。

4. 约束内部子元素宽度 #

检查#element内的图片、文本块等元素，避免它们撑开父容器：

• 图片设置自适应：

#element img {
  max-width: 100%;
  height: auto;
}

• 长文本自动换行：

#element p, #element div {
  word-break: break-word;
}

5. iOS Safari专属兼容（可选） #

若以上设置仍无效，添加webkit前缀强制约束宽度：

#element {
  -webkit-max-width: 390px;
  max-width: 390px;
}

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