ローカルで作業中のメディアクエリ

Question

これは本当に奇妙な問題です。ローカルでテストすると、私のメディアクエリはうまく機能しますが、ファイルを自分のウェブサイトにアップロードしたときに、サーバはメディアクエリに気付かれていないように見えます。最初のものはスマートフォンのものですすべての画面サイズで非表示にした要素をすべてスキップして表示するだけです。彼らはローカルで働くので、彼らは正しいと確信しています。とにかく、ここにhtmlとcssがあります。

<meta name="viewport" content="width=device-width"> 

<header> 
<div class="container"> 
    <h1 id="logo"><a href="index.html"><img src="index/logo.png" alt="logo"/></a></h1> 
<div class="dropdown"> 
    <img src="index/mobilemenubutton.png" id="menubutton"> 
<div class="dropdown-content"> 
    <ul id="nobullets"> 
    <li class="center"><a href="index.html">Home</a></li> 
    <li class="center"><a href="about.html">About</a></li> 
    <li class="center"><a href="services.html">Services</a></li> 
    </ul> 
</div> 
</div> 







    #container_2, #navi, #infoi, #smartphone_main_col, .dropdown, .dropdown- 
    content { 
    display: none; 
    } 

@media screen /*THIS ONE WORKS*/ 
and (max-width: 1367px) { 
.slider { 
    display: none; 
} 
.fader { 
    display: block; 
} 
#navi, #infoi { 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

#infoi { 
    z-index: 1; 
    transition: 2s; 
} 

#infoi:hover { 
    opacity: 0; 
} 

#container_2 { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    display: block; 
} 

#other_f { 
    position: relative; 
    top: 650px; 
} 

#newsletter { 
    z-index: 3; 
} 

.button_1 { 
    display: inline-block; 
    border-radius: 4px; 
    background-color: #0099ff; 
    border: none; 
    color: #FFFFFF; 
    line-height: 4px; 
    font-size: 20px; 
    padding: 20px; 
    padding-top: 18px; 
    padding-bottom: -2; 
    width: 150px; 
    height: 30px; 
    transition: all 1s; 
    cursor: pointer; 
    margin: 5px; 
    position: relative; 
    top: 3.3px; 
} 

footer { 
    z-index: 2; 
    position: relative; 
    bottom: 0; 
    width:100%; 
    height:40px; 
} 
} 

/* Smartphones (portrait and landscape) ---------- */ /*THIS ONE DOESN'T WORK*/ 
    @media screen and (min-width: 320px) and (max-width: 480px){ 
    .slider, .slides, .slide, #infoi, #navi, footer { 
    display: none; 
} 

#background { 
    background-color: #d2d8d0; 
} 

.container { 
    width: 100%; 
    margin: auto; 
    overflow: hidden; 
    padding-right: 0; 
} 

header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    border-bottom: #0099ff 4px solid; 
} 

#logo { 
    float: left; 
    position: relative; 
    right: 25px; 
    bottom: 30px; 
} 

.dropdown { 
    position: absolute; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
} 

#menubutton { 
    position: relative; 
    width: 70px; 
    height: 70px; 
    left: 30px; 
} 

#nobullets { 
    list-style-type: none; 
} 

.center { 
    padding: 10px 20px 10px 0px; 
} 

.center:hover { 
    background-color: #ffffff; 
} 

.dropdown-content { 
    display: none; 
    position: relative; 
    right: 20px; 
    color: black; 
    background-color: #35424a; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
    margin: 0; 
    bottom: 100px; 
    right: 80px; 
    padding: 0; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.link-1 { 
    display: none; 
} 

#smartphone_main_col { 
    display: block; 
    padding-left: 40px; 
    padding-right: 40px; 
    padding-top: 80px; 
} 

#newsletter { 
    height: 80px; 
    position: fixed; 
    bottom: 0; 
    padding-top: 0; 
    padding-right: 0; 
} 

#newsletterhead { 
    font-size: 20px; 
    position: relative; 
    top: -12px; 
    left: 34px; 
} 

#newsletter input[type="email"] { 
    padding: 4px; 
    height: 23px; 
    width: 185px; 
    transition: 1s; 
    position: relative; 
    bottom: 10px; 
    right: 35px; 
    float: left; 
} 
.button_1 { 
    display: inline-block; 
    border-radius: 0px; 
    background-color: #0099ff; 
    border: none; 
    color: #FFFFFF; 
    line-height: 4px; 
    font-size: 20px; 
    padding: 18px; 
    padding-bottom: -12px; 
    width: 120px; 
    height: 7px; 
    transition: all 1s; 
    cursor: pointer; 
    margin: 5px; 
    position: relative; 
    top: -16px; 
    right: 35px; 
} 

} 

Answer 1

あなたは、このような場所のモバイルCSSの前のPC CSS試すことができます。だから私は最終的にみんながそれを考え出した、私は、ユーザースケーラビリティnoに設定していた、私はちょうどそれを設定し

@media screen and (min-width: 320px) and (max-width: 480px){...} 
@media screen and (max-width: 1320px){...} 

Answer 2

をはい、私のブラウザで一時ファイルを削除しても問題ありません。

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user- 
    scalable=yes"> <!--THIS--> 
<meta name="description" content="Affordable and professional web design"> 
    <meta name="keywords" content="web design, affordable web design, 
professional web design, portfolio"> 
<meta name="author" content="Stefan Vujic"> 
<title>Light Designs | Welcome</title> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="icon" href="favicon.png"> 
<script src="jquery-3.2.1.js"></script> 
<script type="text/javascript">