游戏网站embed移动端适配问题：固定尺寸致移动端溢出

核心思路 #

通过CSS的视口单位、宽高比锁定和尺寸范围限制，让Embed既在移动端自适应屏幕，又在PC端保持合适的最小/最大尺寸，避免拉伸变形或显示过小。

优化后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet">
  <title>Alphatron Games - Sans</title>
  <style>
    /* 全局样式重置，消除默认边距 */
    body {
      margin: 0;
      padding: 20px 0;
      font-family: 'Comfortaa', sans-serif;
    }

    /* 游戏容器：控制自适应逻辑 */
    .game-container {
      /* 限制PC端最大尺寸，和原固定尺寸一致 */
      max-width: 1000px;
      max-height: 680px;
      /* 移动端占视口90%宽度，留边距避免贴边 */
      width: 90vw;
      /* 自动计算高度，保持宽高比 */
      height: auto;
      /* 保证最小显示尺寸，避免PC端窗口过小时游戏太小 */
      min-width: 320px;
      min-height: 218px;
      /* 锁定游戏原宽高比（1000/680），防止拉伸变形 */
      aspect-ratio: 1000 / 680;
      /* 水平居中 */
      margin: 0 auto;
    }

    /* Embed标签自适应容器 */
    .game-container embed {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <embed src="https://sans-fight-battle-sim.okechukwuwu.repl.co">
  </div>
</body>
</html>

关键细节说明 #

• 替换了过时的<center>标签，用CSS margin: 0 auto实现水平居中，符合现代Web标准。
• 用aspect-ratio锁定游戏的原始宽高比，避免屏幕尺寸变化时游戏画面拉伸变形。
• max-width/max-height确保PC端不会超过原设计的最佳尺寸；min-width/min-height防止窗口缩小时游戏显示过小。
• width: 90vw让移动端自动适配屏幕宽度，留出左右边距提升体验，无需依赖易出问题的device-width。

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