私のブログでメディアクエリーが動作しないのはなぜですか？

Question

これが私のブログです：Blog 私はそのCSSに以下のコードを書いた：

@media screen and (max-width: 600px){ 
.title a{ 
color: red !important; 
} 
} 
@media screen and (max-width: 500px){ 
header{ 
display: none !important; 
} 
} 

をしかし、私はすべての携帯電話にこのブログを開いたとき、それは何もしません。このサイトは、電話機またはデスクトップのブラウザで開いているかにかかわらず、そのまま表示されます。それはなぜそうですか？あなたのヘッダーにこれを持って

Answer 1

、<meta content="width=1100" name="viewport">

がにそれを変更してください：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tagあなたのコード内で何が起こる

が設定しているされています <meta name="viewport" content="width=device-width, initial-scale=1">

ビューポートの作品が見どのようにメタ理解のためにあなたのウェブページのための "少なくとも1100px"の幅。

これをデバイスの幅に変更することで、ウェブページの幅はデバイスの幅と同じになります。