如何使用媒体查询定位 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 肖像:document.documentElement.clientWidth = 360
• Galaxy Nexus Landscape:document.documentElement.clientWidth = 598
• Nexus 7 肖像:document.documentElement.clientWidth = 603
• Nexus 7 Landscape:document.documentElement.clientWidth = 966

我需要定位以下内容:

• Galaxy Nexus 肖像和平板电脑
• Galaxy Nexus 肖像
• Galaxy Nexus 平板电脑
• Nexus 7 肖像和平板电脑
• Nexus 7 肖像
• 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屋！