Мой веб-сайт отлично работает на рабочем столе и работает на 100% (я использовал медиа-запросы) Когда я открываю HTML на своем мобильном телефоне (через Chrome, Opera или HTML Viewer), он не загружает никакие свойства CSS, даже самые базовые, такие как цвет фона.
Я поместил эту строку в заголовок:
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
но проблема сохраняется ...
Мобильный телефон: Honor 6X
Android 7.0
EMUI 5.0.3
Edit:
Вот пример моего кода:
Как видите, есть несколько файлов, но я дам вам 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">×</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);
}