iOS设备背景图无法全屏适配 求全移动设备解决方案

基础修复方案 #

你的原有代码只设置了html的样式，忽略了body的默认边距和高度继承问题，调整后就能解决大部分设备的适配问题：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* 消除横向滚动条干扰 */
}

html {
  background: url('/path/to/img') no-repeat center center fixed;
  background-size: cover;
  /* 兼容老版本移动端浏览器 */
  -webkit-background-size: cover;
  -moz-background-size: cover;
}

移动端兼容优化方案 #

部分移动端浏览器对background-attachment: fixed支持不佳，会出现背景错位、滚动卡顿的情况，用伪元素方案可以完美规避：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景处于内容下方 */
  background: url('/path/to/img') no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}

补充说明 #

• 确认图片路径无误，移动端测试时注意相对路径的层级问题
• 若页面内容超过一屏高度，上述两种方案都能保持背景固定铺满，不会随内容滚动变形
• 要是需要强制图片完全贴合屏幕（允许拉伸），可以把background-size: cover替换为background-size: 100% 100%，根据设计需求选择即可

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