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

工作代码段(请尝试在 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>

希望这对您有所帮助!