メディアクエリはモバイルブラウザとChromeで動作しません

Question

CSSスタイルのウェブサイトの@mediaに問題があります。現在、firefoxのウェブページをテストすると、縮尺設定されていても問題ありません450px（これは、停止する前にスケールを下げることができる程度だと思います）。しかし、Chromeでテストすると、画面が縮小されたときにメディアスタイルが呼び出されていないように見えます。テストするときにアンドロイドブラウザでは動作しません。

誰かが間違っている場所を教えてもらえますか？ WebのURLは（now.hidden - 質問の回答により）、私はCSSのコードをここから削除します。私が試してみて、ページを稼働させるために、さまざまなことをして遊んでいたメディアの幅を無視してください。

私はまた、-webkit-min-pixel-ration：0を使用してみましたが、これがどのように動作するかはわかりません。ここ

はあなたが.center-foldルールの閉じ括弧を失っているCSS

@media (max-width: 555px) { 
    .invisible2 { display:none; } 
    .center-fold { left: 22%;     
} 

#page { margin-top: -130px; 

} 



.flex-direction-nav li a.prev { 
    background-position: 0 0; 
    left: -20px; 
    display:none; 
} 

.flex-direction-nav li a.next { 
    background-position: -52px 0; 
    right: -21px; 
    display:none; 
} 

nav li a { 
     width: 50%; 
     border-bottom: 1px solid #fff; 
     font: 400 13px/1.4 Georgia, "Times New Roman", Times, serif; 
     margin-bottom: 10px; 
    } 

nav small { 

    display:none; 

} 

.pannels { max-width:178px;   } 

} 

@media (max-width: 450px) { 

     nav li a { 
     width: 50%; 
     font: 400 12px/1.4 Georgia, "Times New Roman", Times, serif; 
     padding-top: 12px; 
     padding-bottom: 12px; 
     } 

#underline { margin-top: 33px; 

} 

.pannels { max-width:178px;   } 

    nav li:nth-child(even) a { 
     border-right: none; 
    } 

    nav li:nth-child(5) a, nav li:nth-child(6) a { 
     border-bottom: 1px solid #fff; 
    } 



    #content .gallery-columns-2 .gallery-item { 
     width: 45%; 
     padding-right: 4%; 
    } 
    #content .gallery-columns-2 .gallery-item img { 
     width: 100%; 
     height: auto; 
    } 
#tea-image { display:none; } 
} 

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    body { 
     padding: 0; 
    } 
    #page { 
     margin-top: 0; 
    } 
    #branding { 
     border-top: none; 
    } 


#tea-image { display:none; } 



} 

Answer 1

@media (max-width: 555px) { 
    .invisible2 { display:none; } 
    .center-fold { left: 22%; 
} 

です。