android - 响应式图像媒体查询不起作用 Nexus 7

Question

我遇到了以下问题。

我正在使用引导程序和引导程序用于以下媒体查询：

/* Extra small devices (phones, up to 480px) */
@media (min-width: @screen-xs) { ... }

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

现在它似乎在所有方面都很完美，但我在 Nexus 7 上遇到了问题。它需要额外的小型设备查询而不是小型设备查询。

难道我做错了什么？我应该使用不同的查询吗？

Answer 1

我不太确定，因为我还没有尝试过，但你可以试一试

@media only screen and (min-device-width: 800px) and (orientation: portrait) {
  #device:after {
    content: "Nexus 7 - portrait - firefox";
  }
}
@media screen and (min-device-width : 602px) and (orientation: portrait) {
  #device:after {
    content: "Nexus 7 - portrait - chrome";
  }
}
@media only screen and (min-device-width : 1280px) and (orientation: landscape) {
  #device:after {
    content: "Nexus 7 - landscape - firefox";
  }
}
@media only screen and (min-device-width : 966px) and (orientation: landscape) {
  body {
    background-color: #008000;
  }
  #device:after {
    content: "Nexus 7 - landscape - chrome";
  }
}

参考：

如何通过媒体查询定位 Galaxy Nexus 和 Nexus 7？

Answer 2

以下代码对我有用，可以针对 Nexus7 选项卡。

/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}

不要忘记在您的 html 中添加元标记。例如，

<meta name="viewport" content="width=device-width"/>