Question

我遇到了以下问题。

我正在使用bootstrap和bootstrap用于跟踪媒体查询：

/* 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";
  }
}

参考：

How to target Galaxy Nexus and Nexus 7 with media queries?

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"/>

响应式图像媒体查询无法使用Nexus 7

2 个答案: