封面图像在移动设备上使用Bootstrap / MDBootstrap无法正确显示，Live Server问题

问题描述

我有一个图像（.jpg），正在用作该项目的封面图像。它在台式机上完美运行，但对于移动设备我看不到任何东西。我不知道它是否放大，但我看不到图像，而是看到颜色渐变作为背景。不管是谁，奇怪的是，当我在Vscode上使用“ Live Server”时，即使在移动设备上，图像的大小也没有变化，但是当我将其托管在Netlify上并在实体电话上查看该站点时，则没有显示。为什么在Live Server上发生这种情况，因为这使我一直感到困惑，以为我的网站是完整的，只是意识到它无法在移动设备上正确显示？图片的尺寸为5585 x 3141，这是我的一些代码。请注意，我不想将所有内容都包含在HTML中，divs，这是一堆其他内容的代码，因此假设存在结束标记（除非您需要该部分的另一半）。Mobile background/cover image。 Desktop background/cover image

html,body,header,#intro {
    height: 100%;
}
/* Spacing so navbar does not cover up the sections */
h2,#darkmode{
    padding-top: 60px;
}
#intro {
    background: url(../img/colorimage.jpg)no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.top-nav-collapse {
  background-color: #24355C;
}
@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}

<!--Main Navigation-->
    <header>
        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

            <div class="container">

                <!-- Navbar brand -->
                <a class="navbar-brand" href="#">Navbar</a>

                <!-- Collapse button -->
                <button class="navbar-toggler first-button " type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent20" aria-controls="navbarSupportedContent20"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <div class="animated-icon1"><span></span><span></span><span></span></div>
                </button>

                <!-- Collapsible content -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent20">

                    <!-- Links -->
                    <ul class="navbar-nav mr-auto smooth-scroll">
                        <li class="nav-item">
                            <a class="middle nav-link" href="#intro">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#best-features">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#examples">Examples</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#gallery">gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                    <!-- Links -->

                    <!-- Social Icon  -->
                    <ul class="navbar-nav nav-flex-icons">
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-facebook"></i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-twitter"></i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-instagram"></i></a>
                        </li>
                    </ul>
                </div>
                <!-- Collapsible content -->

            </div>

        </nav>
        <!--/.Navbar-->

        <!--Mask-->
        <div id="intro" class="view">

            <div class="mask rgba-black-strong">

                <div class="container-fluid d-flex align-items-center justify-content-center h-100">

                    <div class="row d-flex justify-content-center text-center">

                        <div class="col-md-10">

                            <!-- heading -->
                            <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Your Name</h2>

                            <!-- Divider -->
                            <hr class="hr-light">

                            <!-- Description -->
                            <h4 class="white-text my-4">Welcome to my first project</h4>
                            <a class="btn btn-outline-white" href="#darkmode" role="button">Read more<i
                                    class="fa fa-book ml-2"></i></a>
                            <!-- <button type="button" class="btn btn-outline-white">Read more<i
                                    class="fa fa-book ml-2"></i></button> -->

                        </div>

                    </div>

                </div>

            </div>

        </div>
        <!--/.Mask-->

    </header>
    <!--Main Navigation-->

解决方法

html,body,header,#intro {
    height: 100%;
}
/* Spacing so navbar does not cover up the sections */
h2,#darkmode{
    padding-top: 60px;
}
#intro {
    background: url(https://photorator.com/photos/images/kirkjufell-under-the-midnight-sun-iceland-photo-by-coolbiere-a-x-post-rsland-42750.jpg)no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.top-nav-collapse {
  background-color: #24355C;
}
@media (max-width: 768px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}
@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background-color: #24355C;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!--Main Navigation-->
    <header>
        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

            <div class="container">

                <!-- Navbar brand -->
                <a class="navbar-brand" href="#">Navbar</a>

                <!-- Collapse button -->
                <button class="navbar-toggler first-button " type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent20" aria-controls="navbarSupportedContent20"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <div class="animated-icon1"><span></span><span></span><span></span></div>
                </button>

                <!-- Collapsible content -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent20">

                    <!-- Links -->
                    <ul class="navbar-nav mr-auto smooth-scroll">
                        <li class="nav-item">
                            <a class="middle nav-link" href="#intro">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#best-features">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#examples">Examples</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#gallery">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="middle nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                    <!-- Links -->

                    <!-- Social Icon  -->
                    <ul class="navbar-nav nav-flex-icons">
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-facebook"></i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-twitter"></i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"><i class="fab fa-instagram"></i></a>
                        </li>
                    </ul>
                </div>
                <!-- Collapsible content -->

            </div>

        </nav>
        <!--/.Navbar-->

        <!--Mask-->
        <div id="intro" class="view">

            <div class="mask rgba-black-strong">

                <div class="container-fluid d-flex align-items-center justify-content-center h-100">

                    <div class="row d-flex justify-content-center text-center">

                        <div class="col-md-10">

                            <!-- Heading -->
                            <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Your Name</h2>

                            <!-- Divider -->
                            <hr class="hr-light">

                            <!-- Description -->
                            <h4 class="white-text my-4">Welcome to my first project</h4>
                            <a class="btn btn-outline-white" href="#darkmode" role="button">Read more<i
                                    class="fa fa-book ml-2"></i></a>
                            <!-- <button type="button" class="btn btn-outline-white">Read more<i
                                    class="fa fa-book ml-2"></i></button> -->

                        </div>

                    </div>

                </div>

            </div>

        </div>
        <!--/.Mask-->

    </header>
    <!--Main Navigation-->