CSS媒体查询显示错误的大小

Question

全部

我正在使用@media Query为不同的iPhone图像显示不同大小的图像，我遇到了奇怪的问题。当我在8台以上的设备中执行8台设备查询时，我尝试通过删除要测试的图像来进行尝试。下面是代码。

/* ----------- iPhone 6, 6S, 7 and 8 plus ----------- */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
    .container {
  position: absolute;
  padding: 16px;
  right: 10%;
  left: 10%;
  top: 50%;
}
.login-bg-img {
  background-image: url("login_iPhone_plus.png");
  height:100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }
 
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    .container {
  position: absolute;
  padding: 16px;
  right: 10%;
  left: 10%;
  top: 50%;
}
.login-bg-img {
  background-image: url("login_iPhone_6.png");
    height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
}