css @media不针对特定设备iPhone 7 plus

Question

我试图仅针对iPhone 7 plus的横向模式，但任何值的组合似乎都不起作用。附件是一个codepen。有人可以做这个工作吗？ :)。 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

尝试此媒体查询：

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

Working Snippet（请尝试在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>

希望这有帮助！

Answer 2

我找到了修复!!它只针对iPhone 7加横向模式，而不是纵向模式!!

  |  A  |  B  |  C  |  D  |  E  |  F  |
--+-----+-----+-----+-----+-----+-----+
3 |     |     |     |  1  |  2  |  3  |
4 |  1  |     | 101 |     |     |     |
5 |  2  |     | 101 |     |     |     |
6 |  3  |     | 101 |     |     |     |

Working demo here: plz test on iPhone 7 plus