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

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>

希望对您有所帮助！

Answer 2

我找到了修复程序！！它只针对 iPhone 7 plus 横向模式而不是纵向模式！！

   .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

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

css @media does not target specific device iPhone 7 plus

css

iphone

landscape