移动端窗口下Div两侧出现固定边距问题及适配需求

完整修复代码 #

首先在HTML头部添加移动端视口适配标签：

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

然后修改CSS：

body {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

#content{
    aspect-ratio: 1.51;
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    border:1px solid white;
    margin:0;
    padding:0;
}

关键修改说明 #

• 视口标签：缺失这个标签会导致移动端浏览器用虚拟视口宽度（通常980px）渲染，直接造成容器超出屏幕出现额外边距，这是核心问题之一。
• 取消固定宽高：原代码固定的width:600px和height:910px会强制容器尺寸，在小屏幕上超出视口引发横向边距，改为auto让容器根据宽高比和视口限制自适应。
• 限制最大宽高：max-width:100vw和max-height:100vh确保容器不超出视口范围，同时严格保持1.51的宽高比：
  • 视口宽度较小时，容器自动缩至100vw宽度，高度按比例计算填满屏幕宽度；
  • 视口高度较小时，容器自动缩至100vh高度，宽度按比例计算填满屏幕高度；
• 垂直居中：给body添加align-items:center和min-height:100vh，让容器在垂直方向也居中显示（不需要的话可移除这两个属性）。

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