为什么 CSS 样式表在移动设备上不起作用？

Question

我是 webdev 的初学者。 我正在使用 bootstrap 为按摩治疗师开发一个网站。 问题是我的 CSS 样式没有出现在移动设备上。 背景和引导导航栏消失。 我使用 PNG 文件制作大徽标，但也不会在移动设备上显示。 我尝试在移动设备上使用 chrome。

这是 HTML 页面：

    <!DOCTYPE html>

<html lang="hu de">

<head>
  <meta charset="utf-8">
  <title>Massage for You</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <!--CSS Stylesheets-->
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Righteous&display=swap" rel="stylesheet">

  <!--Scripts-->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/c79cd4e211.js" crossorigin="anonymous"></script>

  <!--This script is the language toggler-->
  <script type="text/javascript">
    var arrLang = {
      "hungarian": {
        "aboutme": "Bemutatkozó",
        "massage": "Masszázs",
        "contact": "Foglalás",
        "citation": "A masszázsra fordított idő sohasem elvesztegetett.",
        "introductiontitle": "Bemutatkozás"
      },
      "german": {
        "aboutme": "Einführung",
        "massage": "Massagen",
        "contact": "Kontakt",
        "citation": "Die Zeit, die eine Massage dauert, ist niemals verschwendet.",
        "introductiontitle": "Vorstellung"
      }
    };
    $(document).ready(function() {
      // The default language is German
      var lang = "hungarian";
      $(".lang").each(function(index, element) {
        $(this).text(arrLang[lang][$(this).attr("key")]);
      });
    });

    // get/set the selected language
    $(function() {
      $(".translate").click(function() {
        var lang = $(this).attr("id");

        $(".lang").each(function(index, element) {
          $(this).text(arrLang[lang][$(this).attr("key")]);
        });
      });
    });
  </script>

</head>

<body>
  <!-- Nav Bar: It has two functions. Switch between languages ​​and menu bar for each block of the page-->
  <div class="background1">
    <div class="navbar navbar-expand navbar-dark fixed-top flex-column flex-md-row bd-navbar">
      <div class="navbar-nav-scroll">
        <ul class="navbar-nav bd-navbar-nav fex-row">
          <li class="nav-item">
            <a class="lang nav-link" key="aboutme" href="#about-me"></a>
          </li>
          <li class="nav-item">
            <a class="lang nav-link" key="massage" href="#massage"></a>
          </li>
          <li class="nav-item">
            <a class="lang nav-link" key="contact" href="#contact"></a>
          </li>
        </ul>
      </div>
      <ul class="navbar-nav ml-md-auto">
        <li class="nav-item">
          <a class="translate nav-link" id="hungarian" href="#">HU</a>
        </li>
        <li class="nav-item">
          <a class="translate nav-link" id="german" href="#">DE</a>
        </li>
      </ul>
    </div>
    <div class="container logocontainer">
      <div class="row align-self-center">
        <div class="col-md-auto">
          <img class="logo" src="IMG/massage4U-3K62CX-300dpi.png" alt="Massage for You">
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid" id="about-me">
    <h3 class="lang section-title" key="introductiontitle"></h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
      book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and morerecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  </div>
  <div class="background2">

  </div>
  <div class="background3">

  </div>
</body>

</html>

这是 CSS 样式表：

 body, html {
  height: 100%;
  margin: 0;
  background-color: #fbf0f0;
}

/*Navbar section Styling navbar items and language switcher.*/
.navbar {
  background-color: #7c7575;
  opacity: 0.8;
}

.navbar-image {
  padding-left: 30px;
  margin-bottom: 20px;
}

.navbar-image {
  width: 180px;
}

.nav-item {
  padding: 0 10px;
  color: #fbf0f0;
}

/*Background properties. Parallax effect*/
.background1 {
background-image: url(../IMG/backgroundimg1.jpg);
min-height: 100%;
}

.background2 {
background-image: url(../IMG/backgroundimg2.jpg);
min-height: 800px;
}

.background3 {
  background-image: url(../IMG/backgroundimg3.jpg);
  min-height: 800px;
}

.background1, .background2, .background3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*Turn off parallax on mobile devices*/
@media only screen and (max-device-width: 1024px) {
  .background1, .background2, .background3 {
    background-attachment: scroll;
  }
}

.logocontainer {
  padding-top: 60px;
}

.logo {
  max-width: 90%;
  height: auto;
  padding-top: 40px;
  opacity: 0.6;
}

出现在桌面上的页面

出现在手机上的页面

Answer 1

我解决了这个问题。 原因是移动浏览器使用的基于 ID 的 URL 协议。 此内容协议不起作用，也不会加载任何其他文件（css 表）。