CSS wird nicht geladen, wenn ich eine lokale HTML-Datei auf einem Mobilgerät öffne ⇐ CSS

[Anonymous]

Meine Website funktioniert perfekt auf dem Desktop und reagiert zu 100 % (ich habe Medienabfragen verwendet). Wenn ich den HTML-Code auf meinem Handy öffne (über Chrome, Opera oder HTML Viewer), werden keine CSS-Eigenschaften geladen, nicht einmal die grundlegendsten Elemente wie die Hintergrundfarbe.
Ich habe diese Zeile in meinen Header eingefügt:

Code: Select all

aber das Problem besteht weiterhin...

Mobilgerät: Honor 6X

Android 7.0

EMUI 5.0.3



Bearbeiten:

Hier ist ein Beispiel meines Codes:
Wie Sie sehen können, gibt es mehrere Dateien, aber ich gebe Ihnen common.html und common.css.

Code: Select all

off













[img]../img/h.png[/img]
[img]../img/m.png[/img]
[img]../img/r.png[/img]
[img]../img/p.png[/img]
[img]../img/settings_flat.png[/img]




×
Settings

Color:





Dark mode:

Css:

Code: Select all

*{
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);
}