XiuXianProject/BuildPush/webgl/css/style.css

/* 视口规则建议放在CSS最前面 */
@viewport {
  width: device-width;
  zoom: 1.0;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: none;
}

#unity-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  /* 确保初始状态就居中 */
  left: 0;
  right: 0;
  margin: 0 auto;
  /* 添加过渡效果避免闪动 */
  transition: opacity 0.3s ease;
  opacity: 0;
  /* 初始不可见 */
}

/* 基础竖屏尺寸（9:16比例） */
#unity-canvas {
  width: 360px;
  /* 基准宽度 */
  height: 640px;
  /* 基准高度 */
  background: url('https://cdn.goufuguiwxw.com/ResWebGlTest/gfg/Build/webgl.jpg') center / cover;
  /* 确保canvas初始位置正确 */
  position: relative;
  left: 0;
  margin: 0 auto;
}

/* 高质量渲染 */
#unity-canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* 移动端适配 */
@media (max-width: 768px) {
  #unity-canvas {
    width: 100vw !important;
    /* 精确匹配视口宽度 */
    height: calc(100vw * 16/9) !important;
    /* 强制按比例计算高度 */
    max-height: 100vh !important;
    /* 确保不超过屏幕高度 */
    position: absolute;
    left: 0 !important;
    right: 0 !important;
  }

  #unity-container {
    width: 100vw !important;
    /* 使用视口单位确保精确 */
    overflow: hidden;
    /* 隐藏任何可能的溢出 */
  }

  /* 修复iOS Safari的视口问题 */
  @supports (-webkit-touch-callout: none) {
    #unity-canvas {
      height: -webkit-fill-available !important;
    }
  }
}

/* PC端特殊适配 */
@media (min-width: 769px) {
  #unity-canvas {
    height: 100vh !important;
    /* 独占高度 */
    width: calc(100vh * 9/16) !important;
    /* 按比例计算宽度 */
  }
}