我在移动设备上打开本地HTML文件时未加载CSS

问题描述 投票：0回答：3

我的网站在桌面上完美运行，并且它100％响应（我使用媒体查询）。当我在手机上打开html（通过Chrome，Opera或HTML Viewer）时，它不会加载任何CSS属性，甚至不会加载最基本的背景颜色。我把这一行放在我的标题中：

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

但问题仍然存在......

手机：荣誉6X

Android 7.0

艾美奖5.0.3

编辑：enter image description here以下是我的代码示例：如您所见，有几个文件，但我会给你common.html和common.css。

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <title>off</title>
    <link rel="stylesheet" href="../css/variables.css">
    <link rel="stylesheet" href="../css/common.css">
    <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Baloo+Chettan" rel="stylesheet">


  </head>


  <body id="aBody" class="light-mode">

    <div id="container">

      <header>

        <nav id="navbar">
          <div class="icon"><img src="../img/h.png" alt="h"></div>
          <div class="icon"><img src="../img/m.png" alt="m"></div>
          <div class="icon"><img src="../img/r.png" alt="r"></div>
          <div class="icon"><img src="../img/p.png" alt="p"></div>
          <div class="icon" id="settingsBtn"><img src="../img/settings_flat.png" alt="settings"></div>
        </nav>

        <div id="myModal" class="modal">

         <div id="modalContent" class="modal-content light-mode">

           <span class="close">&times;</span>
           <h1>Settings</h1>
           <br>
           <p>Color:</p>
           <div id="colors">
            <div id="A" onclick="changeColor(this)" class="color-change"></div>
            <div id="B" onclick="changeColor(this)" class="color-change"></div>
            <div id="C" onclick="changeColor(this)" class="color-change"></div>
            <div id="D" onclick="changeColor(this)" class="color-change"></div>
          </div>

           <p>Dark mode:</p>

           <input onclick="invertMode()" type="checkbox" id="switch" />
           <label for="switch"></label>

         </div>

        </div>

      </header>

  </body>

  <script src="../js/modal.js" charset="utf-8"></script>
  <script src="../js/darkmode.js" charset="utf-8"></script>
  <script src="../js/changecolor.js" charset="utf-8"></script>

</html>

CSS：

*{
  margin:0;
  font-family: var(--main-font);
}

/* -- Navigation Bar -- */
nav{
  height: 100vh;
  width: var(--navbar-dimension);
  background-image: linear-gradient(var(--navbar-top), var(--navbar-bottom));
  position: fixed;
  transition: top var(--transition-speed);
}

nav:after{
  content:"";
  display: table;
  clear: both;
}
/* -- Icons -- */
.icon > img{
  height: var(--icon-dimension);
  width: auto;
}

.icon{
  float: left;
  width: 100%;
  height: var(--plus-h);
  text-align:center;
  transition: background-color var(--transition-speed);

}

.icon:hover{
  background-color:rgba(0,0,0,0.2);
}

.icon:left{
  background-color: rgba(0,0,0,0);
}

/* -- Settings Box -- */
.modal {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.5); /* Black w/ opacity */

}

.modal-content {
 margin: 15% auto; /* 15% from the top and centered */
 padding: 20px;
 width: 80%; /* Could be more or less, depending on screen size */
 border-radius: 10px;

}

.modal-content > h1, .modal-content p{
  color: #777;
}

.modal-content.light-mode{
  background-color: var(--page-light);
}

.modal-content.dark-mode{
  background-color: var(--page-dark);
}

.close {
 color: #aaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}

.close:hover,
.close:focus {
 color: black;
 text-decoration: none;
 cursor: pointer;
}

/* -- Toggle Switch -- */

input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
}

label {
    cursor: pointer;
    width: 50px;
    height: 20px;
    background: #555;
    display: block;
    border-radius: 200px;
  position: relative;
}


label:after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 26px;
    height: 26px;
    background: var(--navbar-top);
    border-radius: 90px;
    transition: 0.3s;
}

input:checked + label {
    background: var(--navbar-bottom);
}

input:checked + label:after {
    left: calc(100% + 3px);
    transform: translateX(-100%);
}

label:active:after {
    width: 30px;
}

/* -- Custom Colors -- */
#colors{
    padding:5px;
    display:block;
}

.color-change{
    display:inline-block;
    width:var(--cc-width);
    height:var(--cc-height);
    border-radius: 5px;
}

.color-change:nth-child(1){
  background-image: linear-gradient(var(--ccA-top), var(--ccA-bottom));
}

.color-change:nth-child(2){
  background-image: linear-gradient(var(--ccB-top), var(--ccB-bottom));
}

.color-change:nth-child(3){
  background-image: linear-gradient(var(--ccC-top), var(--ccC-bottom));
}

.color-change:nth-child(4){
  background-image: linear-gradient(var(--ccD-top), var(--ccD-bottom));
}




@media screen and (min-width: 681px){
  .icon{
    line-height: var(--plus-h);
  }
  .icon > img{
    vertical-align: middle;
  }
}

@media screen and (max-height: 450) {
  .icon{
    height: 20vh;
    line-height: 20vh;

  }
  .icon > img{
    height: 20px;
    width: auto;
  }
}

@media screen and (max-width: 680px) {

  nav{
    height: var(--navbar-dimension);
    width: 100vw;
  }

  nav:after{
    content: "";
    display: table;
    clear: both;
  }

  .icon{
    float: left;
    width: var(--plus-w);
    height: 100%;
  }

  .icon > img{
    margin-top: calc((var(--navbar-dimension) - var(--icon-dimension))/2);
  }

}

::selection {
  background: var(--navbar-bottom);
  color: white;
}
::-moz-selection {
  background: var(--navbar-bottom);
  color: white;
}

h3::selection{
  background: rgba(0,0,0,0.5);
}

body.light-mode{
  background-color: var(--body-light);
}
body.dark-mode{
  background-color: var(--body-dark);
}
html css mobile
3个回答
0
投票

您的手机可能没有收到所有文件，只有HTML文件。 发生这种情况时，您的HTML文件不会更改任何样式，因为它无法读取手机上不存在的CSS文件。 为了能够查看手机上的文件，您可以确保整个项目文件夹在手机上，然后从那里打开它。您还可以使用内联样式方法（在HTML文件中添加<style></style>标记），因为您有很多CSS文件，所以不建议这样做。

我假设你使用你发送的图片中的Atom文本编辑器，所以你可以使用atom-live-server包并在你的PC上查看它。 我为什么这么说？因为如果在终端中键入ipconfig，则可以在本地网络上看到PC的本地IPv4地址。如果您的PC和手机都连接到同一个网络，您只需输入URL IPv4:PORT即可查看手机中的网站，其中IPv4是您PC的本地IPv4地址，PORT是服务器托管的端口，使用atom-live-服务器。 URL的一个例子是192.168.1.1:3000。这将允许您从连接到网络的任何设备查看网站。

0
投票

有两种方法可以绕过错误，尝试其中之一。

尝试使用样式块将CSS嵌入到HTML中。这不是一个好习惯，但它解决了我的问题。我很确定你是想保持你的代码干净，但它仍然可以工作。

也;

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

KIndly注意到前倾斜杠......（/）

最后，您可以尝试使用Web控制台检查错误。不同的浏览器工作不同

祝好运！

0
投票

不确定它在你正在使用的手机上是否重要，但不应该是viewport系列中的分号。应该：

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.