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

Question

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

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

• Galaxy Nexus Portrait: document.documentElement.clientWidth = 360
• Galaxy Nexus景观: document.documentElement.clientWidth = 598
• Nexus 7 Portrait: document.documentElement.clientWidth = 603
• Nexus 7景观: document.documentElement.clientWidth = 966

我需要针对以下内容:

• Galaxy Nexus肖像和平板电脑
• Galaxy Nexus Portrait
• Galaxy Nexus平板电脑
• Nexus 7人像和平板电脑
• Nexus 7 Portrait
• 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; }
}

还有,我知道你不应该如此具体,在做响应设计时针对个别设备,但我这样做主要是为了测试,在这种情况下需要这样做.任何帮助,将不胜感激.

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 在此处查看结果

Answer 2

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

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

定位 998 像素到 999 像素之间的任意像素