Question

我有两个设备，我正在测试网站设计。三星Galaxy Nexus和华硕Nexus 7平板电脑。我很难确定如何使用媒体查询来定位这些单独的设备。我不确定max-width使用哪些值或使用max-device-width。此外，我无法弄清楚媒体查询的顺序...

根据：http://responsejs.com/labs/dimensions/

Galaxy Nexus Portrait：document.documentElement.clientWidth = 360
Galaxy Nexus Landscape：document.documentElement.clientWidth = 598
Nexus 7 Portrait：document.documentElement.clientWidth = 603
Nexus 7 Landscape：document.documentElement.clientWidth = 966

我需要针对以下内容：

Galaxy Nexus Portrait and Tablet
Galaxy Nexus Portrait
Galaxy Nexus Tablet
Nexus 7 Portrait and Tablet
Nexus 7 Portrait
Nexus 7 Tablet

我尝试了以下测试，但没有取得好成绩......不确定我做错了什么。我只是在玩弄数字试图弄清楚什么有用，什么没有...

/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
    ul.top-menu { background: red; }
}

/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
    ul.top-menu { background: blue; }
}

/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
    ul.top-menu { background: purple; }
}

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    ul.top-menu { background: yellow; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    ul.top-menu { background: green; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    ul.top-menu { background: orange; }
}

而且仅供参考我知道你不应该如此具体，在做响应设计时针对个别设备，但我这样做主要是为了测试而需要在这种情况下做到这一点。任何帮助将不胜感激。

Answer 1

我有一个Nexus 7，我试过你的sricpt。问题是每个浏览器都有不同的视口。因此，获得正确的结果非常复杂。

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

我没时间制作Opera。

您可以使用Nexus 7

查看the result here

Answer 2

要专门定位，您可以使用：

@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}

这将获得nexus 7，如果您有iPhone目标媒体查询，他们将保持原状。

Answer 3

Nexus 7（v1）2012

Mozilla/5.0 (Linux; Android 4.4.3; Nexus 7 Build/KTU84L) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Safari/537.36

@media screen
resolution: 192dpi/2dppx
color: 8
-webkit-device-pixel-ratio: 2

orientation: portrait
  width: 600px/37.5em/158mm
  height: 791px/49.4375em/209mm
  device-width: 600px/37.5em/158mm
  device-height: 960px/60em/254mm
  aspect-ratio: 600/791
  device-aspect-ratio: 5/8 or 758/1000
orientation:landscape
  width: 960px/60em/254mm
  height:431px/26.9375em/114mm
  device-width:960px/60em/254mm
  device-height:600px/37.5em/158mm
  aspect-ratio:960/431
  device-aspect-ratio:8/5 or 2227/1000

Nexus 7（v2）2013

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Sfari/537.36

@media screen
resolution: 127dpi/1dppx
color: 8
-webkit-device-pixel-ratio: 1.3312500715255737 or 1.3

orientation: portrait
  width: 601px/37.5625em/159mm
  height: 881px/55.0625em/207mm
  device-width: 601px/37.5625em/159mm
  device-height: 962px/60.125em/254mm
  aspect-ratio: 601/881
  device-aspect-ratio: 601/962
orientation: landscape
  width: 962px/60.125em/254mm
  height: 529px/33.0625em/114mm
  device-width: 962px/60.125em/254mm
  device-height: 601px/37.5625em/159mm
  aspect-ratio: 962/529
  device-aspect-ratio: 962/601 or 2221/1000

Answer 4

您应该尝试使用英寸混合屏幕尺寸和px密度/空间

有了这个你可以有一个独特的布局，一个星系连接和一个nexus 7没有一堆线来解决！

// High end Android device
@media  screen and (min-width: 600px) and (max-width: 5in)
{

}
// nexus 7 and ipad mini
@media  screen and (min-width: 7in) and (max-width: 9in)
{

}

这里有一篇关于此的文章： http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/

Answer 5

以下代码对我来说是针对Nexus7标签的。

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

不要忘记在HTML中添加元标记。例如，

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

Answer 6

在Nexus 7上Chrome浏览器上运行的媒体查询是：

@media only screen and (width : 600px) and (orientation: portrait) {

}


@media only screen and (width : 961px) and (orientation: landscape) {

}

Answer 7

您可以使用和表达式对同一媒体查询使用多个规则

@media screen and (min-width: 998px) and (max-width: 999px)

目标任何介于998px和999px之间

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

7 个答案:

Nexus 7（v1）2012

Nexus 7（v2）2013