14

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

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

  • Galaxy Nexus 肖像：document.documentElement.clientWidth = 360
  • Galaxy Nexus 风景：document.documentElement.clientWidth = 598
  • Nexus 7 肖像：document.documentElement.clientWidth = 603
  • Nexus 7 风景：document.documentElement.clientWidth = 966

我需要针对以下内容：

  • Galaxy Nexus 肖像和平板电脑
  • Galaxy Nexus 肖像
  • Galaxy Nexus 平板电脑
  • Nexus 7 纵向和平板电脑
  • Nexus 7 肖像
  • Nexus 7 平板电脑

我尝试了以下测试，但没有得到好的结果......不知道我做错了什么。我只是在玩弄数字，试图弄清楚什么有效，什么无效......

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

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

4

7 回答 7

8

我有一个 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在此处查看结果

于 2012-09-26T07:24:14.843 回答
2

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

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

这将得到nexus 7，如果你有iPhone定位媒体查询，它们将保持不变。

于 2013-03-07T14:33:53.663 回答
1

连结 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

连结 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
于 2015-07-30T18:59:52.243 回答
0

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

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

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

<meta name="viewport" content="width=device-width"/>
于 2014-08-27T07:48:44.147 回答
0

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

有了这个，你可以为一个星系联结和一个联结 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/

于 2013-04-17T19:32:10.960 回答
-2

在 Nexus 7 上的 Chrome 上对我有用的媒体查询是：

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

}


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

}
于 2013-02-01T11:53:43.923 回答
-3

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

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

定位在 998px 到 999px 之间

于 2012-09-24T00:23:45.417 回答