咨询：HTML/CSS桌游移动端背景图片留白问题解决方案

以下是针对你遇到的背景图无法覆盖实际手机屏幕的问题，整理的可行解决方案：

1. 重置页面基础样式 #

首先消除浏览器默认的边距和内边距，确保html和body完全占满视口：

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 避免页面溢出产生滚动条 */
}

2. 配置正确的viewport元标签 #

在页面的<head>中添加viewport设置，这是适配实际移动端设备的关键，尤其是viewport-fit=cover属性，能让页面覆盖包括刘海、圆角在内的整个屏幕区域：

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

3. 优化背景图的CSS属性 #

使用background复合属性确保背景图完全覆盖容器，同时保持比例适配：

body {
  background: url('你的背景图路径') no-repeat center center / cover fixed;
}

各属性作用：

• no-repeat：禁止背景图重复平铺
• center center：让背景图在容器内居中显示
• / cover：等比例缩放背景图，使其完全覆盖容器，超出部分自动裁剪
• fixed：背景图固定在视口位置，页面滚动时不会跟随移动（可根据需求移除）

4. 适配高DPI设备（可选） #

为了避免高分辨率手机上背景图模糊，可根据设备像素比加载不同分辨率的图片：

/* 适配2x分辨率设备 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    background-image: url('你的2x背景图路径');
  }
}

/* 适配3x分辨率设备 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  body {
    background-image: url('你的3x背景图路径');
  }
}

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