如何让设置max-width的极简静态网站适配移动端？

核心问题原因 #

移动端Safari默认会将页面当作桌面端页面缩放显示，导致你设置的max-width:45em被错误缩放，同时出现右侧多余空白和缩放限制问题。

具体修复步骤 #

• 添加视口元标签
  在页面的<head>区域插入以下代码，强制浏览器使用设备宽度作为视口宽度，并锁定缩放比例：

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

  这会让移动端浏览器直接按你设置的max-width渲染页面，避免默认的缩放行为。

• 优化body布局
  给body添加水平居中样式，确保内容在视口中居中显示，消除右侧空白：

  body {
    max-width: 45em;
    margin: 0 auto;
  }
  

• 图片自适应处理
  为图片添加自适应规则，确保图片不会超出body的最大宽度：

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

  这样图片会自动适配容器宽度，同时保持原有宽高比。

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