css - 媒体屏幕查询显示在检查但不在实际设备上

Question

我试过谷歌搜索，但似乎无法做到这一点。

我已经为 iPhone 7 plus 制作了媒体屏幕查询代码和视口，但它不会出现在我的设备上。我试过在 Chrome 上进行检查，它看起来应该是这样。这是代码：

@media screen and (height:736px) and (width:414px){
  div.banner{
  height:600px;
  background-image:url(../../assets/img/mobilehome.jpg)!important
}

标签： cssmedia-queries

Answer 1

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

学分：https ://css-tricks.com/snippets/css/media-queries-for-standard-devices/