携帯電話でCSSメディアクエリが無視されるのはなぜですか？

Question

ブラウザのサイズを変更するとうまくいくように見えますが、インスペクタ（「トグルデバイスモード」）や携帯電話でレスポンシブデザインツールを使用すると、うまく動作しないようです。ここで

は私のCSSの一部です：

@media screen and (max-width: 1500px) { 


    body { 
    width: 100%; 
    } 
} 

@media screen and (max-width: 1200px) { 


    body { 
    width: 100%; 
    } 

    #slider_container { 
    float: none; 
    padding-top: 2em; 
    width: 75%; 
    display: block; 
    overflow: hidden; 
    padding-left: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    } 

    #slide_desc { 
    // 

    width: 30%; 
    display: block; 
    float: none; 
    margin-top: 0; 
    margin-left: auto !important; 
    margin-right: auto; 
    overflow: hidden; 
    font-size: 1.3em; 
    color: #353535; 
/* line-height: 2em; */ 
    text-align: justify; 
    font-family: georgia; 
    width: 80%; 
    } 
} 

@media screen and (max-width: 768px) { 

    #slider_container { 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    padding-top: 1em; 
    } 

    #menu_button { 
    display: block; 
    width: 2em; 
    float: right; 
    margin-top: 0.5em; 
    margin-right: 2em; 
    cursor: pointer; 
    } 

    #top_menu { 
    overflow: hidden !important; 
    height: 3em; 
    /* background-color: gray; */ 
    } 

    #top_menu>ul { 
    margin-top: 3em; 
    width: 100%; 
    height: 0; 
    position: absolute; 
    z-index: 100; 
    overflow: hidden; 
    } 

    #top_menu>ul>li { 
    margin: 0; 
    /* background-color:red !important; */ 
    width: 100% !important; 
    display: block !important; 
    } 

    #top_menu>ul>li>a { 
    text-align: left; 
    width: 100%; 
    margin-left: 0; 
    padding-left: 1em; 
    height: auto; 
    } 

    #slides_container { 
    display: none; 
    } 
} 

最初の2つのメディアクエリは、常に正常に動作しますが、第三は無視されます。 3番目のメディアクエリは、ブラウザ自体のサイズを768px以下に変更した場合にのみ機能します。

他の同様の質問がありますが、主に!importantの使用、またはクエリの置き忘れに関連しています。私の質問はファイルの最後にあり、ブラウザのサイズが変更された場合、彼らはうまくいくのです。

これはなぜ起こっているのでしょうか？

Answer 1

ビューポートメタタグをcontent="width=device-width, initial-scale=1"に設定する必要があります。これはブラウザに、ページの幅をデバイスの画面の幅で表示するように指示します。したがって、その画面の幅が320ピクセルの場合、ブラウザウィンドウはズームアウトされずに960ピクセル（またはそのデバイスがデフォルトで行うもの）を表示するのではなく、320ピクセル幅になります。

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

ビューポートメタタグとその動作方法の詳細はhereです。

Answer 2

あなたは構文エラーを持っているので：

#slide_desc { 
    // 

ダブルスラッシュは、CSSには有効ではありません。