モバイルデバイスが動作しないためのCSSメディアクエリ

Question

私はサイトをより反応的にするためにメディアクエリを使用しています。ただし、メディアクエリはパソコン（Chrome）で正常に動作しますが、モバイルデバイス（iPadやiPhone）で表示してもメディアクエリは有効にならないようです。私は頭の中でビューポートタグを持っているが、私は何か他のものを欠けている推測しています....

CSS

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText { 
     color: pink; 
    } 
} 
@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText { 
     color: blue; 
    } 
} 
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText { 
     color: red; 
    } 
} 
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText { 
     color: yellow; 
    } 
} 
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText { 
     color: green; 
    } 
} 
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText { 
     color: purple; 
    } 
} 

HTML

<meta charset=utf-8> 
<meta http-equiv=X-UA-Compatible content="IE=edge"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

<div id="mainText"> 
    <h1>Text</h1> 
    <h2>Text</h2> 
</div> 

Answer 1

ががあるようですフィルタでフィルタリングする

filter: brightness(1%); 

Webkitのベンダープレフィックスを追加していないので、chromeは単にそれを無視することにしています。このルールを削除するか、以下をCSSに追加することができます。

-webkit-filter: brightness(1%); 
filter: brightness(1%); 

乾杯とハッピーコーディング！

Answer 2

あなたのクエリは、常に前のもの

@media (max-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText { 
     color: pink; 
    } 
} 
@media (min-width:321px) and (max-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText { 
     color: blue; 
    } 
} 
@media (min-width:482px) and (max-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText { 
     color: red; 
    } 
} 
@media (min-width:642px) and (max-width:1024px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText { 
     color: yellow; 
    } 
} 
@media (min-width:1025px) and (max-width:1280px){ 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText { 
     color: green; 
    } 
} 
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText { 
     color: purple; 
    } 
}