メディアクエリを使用中にモバイルでCSSが動作しない

Question

モバイルで動作するようメディアクエリを取得しようとしています。私は最小/最大幅のサイズと共に適切な@メディアクエリを使用しました。それは私のコンピュータ上で動作しますが、私のモバイルデバイスでは動作しません。また、頭に適切なメタタグを追加しました。

<meta name="viewport" content="width=device-width,initial-scale=1"> 

@media only screen and (max-width: 480px){ 
    #top-table{ 
     background-color: green; 
    } 
} 

私はそれが複数のデバイス上で動作するようにしたいと思いけれども、私はサムスンGalaxyS5を使用しています。私はChromeを使用しています。ブラウザのサイズを変更するとうまく動作しますが、モバイルでは変更はありません。

Answer 1

これ以上の情報はありませんが、私が頭の中で考えることができるいくつかのことは、あなたがインポートしたCSSの下に適切に含まれているかどうかを確認することです

<link rel="stylesheet" type="text/css" href="css/normalize.css"> 
<link rel="stylesheet" type="text/css" href="css/main.css"> 
<link rel="stylesheet" type="text/css" href="css/responsive.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

もう1つのポイントは、メディアクエリが正しく含まれていることを確認することです。私はそれがばかげて聞こえることを知っているが、ちょうど確認することを確認してください最後に、私の頭の上から私ができることは、メディアクエリーを正しく使用したことです。上記の例のように別々のファイルに含めることがベストプラクティスであり、どのような順序で入っているかを確認することをお勧めします。モバイル先のプラットフォームを実行しようとしていた場合は、画面解像度が一番低い画面幅です。または、デスクトップの最初のアプリケーションを実行している場合はその逆です。もしあなたがこれをすべてダブルチェックしたら、単にすべてを保存してプログラムを再起動すると思いますが、ばかげているのですが、いくつかの異なるIDEでいくつかの問題が修正されたようです。ご多幸を祈る！

EDIT

は、（明らかに独自のコードで）このようにそれをフォーマットしてみて、それはいくつかの問題を修正するかどうかを確認します！

@media screen and (min-width: 500px) { 

    /*****BODY*****/ 

    #disp2 { 
     display: inline; 
    } 

    #wrapper img { 
     width: 45%; 
     float: left; 
     margin: 2.5%; 
    } 

    #wrapper .cycle-slideshow img { 
     width: 95%; 
     float: left; 
    } 

    .secondary-content2 { 
     max-width: 450px; 
     margin: 0 auto; 
     padding: 2.5%; 
    } 

    /**************/ 

    }