私の最大幅のメディアクエリが適用されないときに適用されます

Question

私はiPhone 7のためにサイトを反応させようとしています。問題は、メディアクエリが正常に動作していないときに動作していることです。 iPhone 7ではmax-width: 320pxを使用していますが、実際の解像度は375px（少なくともhttps://mydevice.io/devices/に表示されています）ですので、メディアクエリが適用されるのはなぜですか？ 375pxが320PX

/* iPhone 7 */ 
@media screen and (max-width: 320px) { 
.qr_popup { 
    left: 50%; 
    top: 200px; 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-radius: 10px; 
    background: #ededed; 
    width: 85%; 
    position: relative; 
    box-shadow: 0px 0px 3px white;}} 

/* Galaxy */ 
@media screen and (min-width: 360px) { 
.qr_popup { 
    left: 50%; 
    top: 250px; 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-radius: 10px; 
    background: #ededed; 
    width: 85%; 
    position: relative; 
    box-shadow: 0px 0px 3px white;}} 

よりも大きい異なるがトップである：250ピクセル。

Answer 1

あなたが述べたようにあなたの第2のメディアクエリーは少なくとも 360px幅である任意のビューポート、iPhone 7に適用されますが375pxです。

360pxが 375px未満であるため、2番目のメディアクエリが適用されます。

---

FWIW私は特定のデバイスをターゲットにしません（緊急に必要な場合を除きます）。ビューポートが拡大されたときにコンテンツやレイアウトが指示するので、私は小さなものから始まりブレークポイントを追加します。