css @media zielt nicht auf bestimmte Geräte iPhone 7 plus

Question

Ich versuche, nur den Querformat-Modus des iPhone 7 Plus zu zielen, aber jede Kombination von Werten scheint nicht zu funktionieren. Beigefügt ist ein Codepen. Könnte jemand bitte diese Arbeit machen? :). Codepen demo link

.box { 
    height: 30vh; 
    width: 20vw; 
    background-color: coral; 
} 

@media only screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (orientation :landscape) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
/*  and (-webkit-min-device-pixel-ratio : 2) */ 
{ 
    .box { 
    background-color: blue; 
    } 
} 

HTML:

<main><div class="box"></div></main> 

Answer 1

Ich fand eine Lösung !! Es zielt nur auf iPhone 7 plus Querformat und nicht auf Hochformat !!

.box { 
     height: 30vh; 
     width: 20vw; 
     background-color: coral; 
    } 

     /* iPhone 7+ Landscape */ 
       @media only screen 
        and (min-device-width: 414px) 
        and (max-device-width: 736px) 
        and (-webkit-min-device-pixel-ratio: 3) 
        and (orientation: landscape) 
        and (min-aspect-ratio: 16/9) 
      { 
       .box { 
       background-color: blue; 
       } 
      } 

<!-- HTML --> 
    <main><div class="box"></div></main> 

Working demo here: plz test on iPhone 7 plus

Answer 2

Versuchen Sie, diese Medien-Abfrage:

/* iPhone 7+ Landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) 
    and (orientation: landscape) { 
    ... 
} 

Arbeits Snippet (Bitte versuchen Sie dies auf dem iPhone 7+ zu laufen):

.box { 
 
    height: 30vh; 
 
    width: 20vw; 
 
    background-color: coral; 
 
} 
 

 

 
/* iPhone 7+ Landscape */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 
    .box { 
 
    background-color: blue; 
 
    } 
 
}

<main><div class="box"></div></main>

Hoffe, das hilft!