CSS не загружается, когда я открываю локальный HTML-файл на мобильном устройстве ⇐ Html

[Anonymous]

Мой веб-сайт отлично работает на настольных компьютерах и на 100 % отзывчив (я использовал медиа-запросы). Когда я открываю HTML-код на своем мобильном телефоне (через Chrome, Opera или средство просмотра HTML), он не загружает никаких свойств CSS, даже самых основных, таких как цвет фона.
Я помещаю эту строку в свой заголовок:




но проблема остается...

Мобильный телефон: Honor 6X

Android 7.0

EMUI 5.0.3



Изменить:

Вот пример моего кода:
Как видите, файлов несколько, но я дам вам common.html и common.css.








off






















×
Settings

Color:





Dark mode:



















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


Подробнее здесь: https://stackoverflow.com/questions/555 ... -on-mobile