Nuxt.js移动端背景图片无法全屏覆盖问题求助

我之前开发Nuxt项目时也碰到过一模一样的情况——Chrome调试工具里怎么模拟都正常，一到真机上背景就只跟着内容区域走，内容短的时候根本覆盖不了全屏。其实问题出在html、body以及布局容器的高度没有正确撑满视口，再加上移动端浏览器对fixed背景的渲染特性导致的。

具体解决方案： #

1. 修正全局CSS（assets/css/main.css）

给html和body都设置高度为100%，同时清除默认的内外边距，确保它们能撑满整个视口：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body { 
  background: url('../img/background.jpg') no-repeat fixed; 
  background-position: center center; 
  background-size: cover; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
}

2. 确保布局容器撑满视口（layouts/default.vue）

默认的布局根div需要设置最小高度为100vh（或者100%，配合html/body的100%），这样即使页面内容很短，布局容器也会覆盖整个屏幕：

<template>
  <div style="min-height: 100vh;">
    <nuxt />
  </div>
</template>

<script>
export default { }
</script>

3. 确认视口设置（nuxt.config.js）

确保项目的视口meta标签正确配置，让移动端浏览器正确识别屏幕宽度：

export default {
  head: {
    meta: [
      { 
        name: 'viewport', 
        content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' 
      }
    ]
  }
}

为什么这样有效？ #

在桌面端调试工具里，浏览器会自动让html/body撑满视口，但真机移动端浏览器的默认行为是：html和body的高度只会跟随内容高度变化，如果内容没有占满屏幕，它们的高度就小于视口高度，fixed定位的背景自然只会覆盖到内容的底部。通过强制设置html、body和布局容器的高度为100%/100vh，就能让背景图片覆盖整个屏幕了。

另外，记得测试前清除移动端浏览器的缓存，有时候旧的CSS会影响效果哦！

内容的提问来源于stack exchange，提问作者Murat Özcan