css @media не нацелена на конкретное устройство iPhone 7 plus

Question

Я пытаюсь настроить таргетинг только на альбомный режим iPhone 7 плюс, но любая комбинация значений не работает. Прилагается кодовая ручка. Может ли кто-нибудь сделать эту работу?:) Демонстрационная ссылка Codepen

   .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

Я нашел исправление!! Это предназначалось только для iPhone 7 плюс пейзажный режим и не портретный режим!!

   .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>

Рабочая демонстрация здесь: плз тест на iPhone 7 плюс

Answer 2

Попробуйте этот медиа-запрос:

/* 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) { 
  ...
}

Рабочий фрагмент (пожалуйста, попробуйте запустить его на iPhone 7+):

.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>

Надеюсь это поможет!