如何通过媒体查询定位Galaxy Nexus和Nexus 7? [英] How to target Galaxy Nexus and Nexus 7 with media queries?

问题描述

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

I have two devices that I'm testing site design with. Samsung Galaxy Nexus and Asus Nexus 7 tablet. I'm having a really hard time figuring out how to target these individual devices with media queries. I'm not sure about what values to use for max-width or to use max-device-width. Also I can't figure out what order to put the media queries in...

根据: 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景观:document.documentElement.clientWidth = 966

• 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和平板电脑
• Galaxy Nexus Portrait
• Galaxy Nexus平板电脑
• Nexus 7 Portrait and Tablet
• Nexus 7 Portrait
• Nexus 7平板电脑

我尝试了以下方法进行测试，但未取得良好结果...不确定我做错了什么.我只是在四处摸索，试图找出有效的方法和无效的方法.

I tried the following for testing but didn't have good results... Not sure what I'm doing wrong. I was kinda just playing around with the numbers trying to figure out what worked and what didn't...

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

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

And FYI I know that you aren't really supposed to be so specific, targeting individual devices when doing Responsive Design, but I'm doing this mostly for as a test and need to do it in this case. Any help would be appreciated.

推荐答案

我有一个Nexus 7，并且已经尝试过您的产品.问题在于每个浏览器都有不同的视口.因此，获得正确的结果很复杂.

I have a Nexus 7 and I have try your sricpt. The problem is that every browser have a different viewport. So it's complex to have a correct result.

@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.

I don't have time to make Opera.

您可以使用Nexus 7在此处查看结果

You can view the result here with your Nexus 7

这篇关于如何通过媒体查询定位Galaxy Nexus和Nexus 7?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！