CSS 如何使用媒体查询定位 Galaxy Nexus 和 Nexus 7？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12557353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to target Galaxy Nexus and Nexus 7 with media queries?
提问by Jake Wilson
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-widthor to use max-device-width. Also I can't figure out what order to put the media queries in...
我有两个设备用于测试网站设计。三星 Galaxy Nexus 和华硕 Nexus 7 平板电脑。我很难弄清楚如何使用媒体查询来定位这些单个设备。我不确定要使用max-width或使用什么值max-device-width。此外，我无法弄清楚将媒体查询放入的顺序...
According to: http://responsejs.com/labs/dimensions/
根据：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 肖像：
document.documentElement.clientWidth = 360 - Galaxy Nexus 景观：
document.documentElement.clientWidth = 598 - Nexus 7 肖像：
document.documentElement.clientWidth = 603 - Nexus 7 景观：
document.documentElement.clientWidth = 966
I need to target the following:
我需要针对以下目标：
- Galaxy Nexus Portrait and Tablet
- Galaxy Nexus Portrait
- Galaxy Nexus Tablet
- Nexus 7 Portrait and Tablet
- Nexus 7 Portrait
- Nexus 7 Tablet
- 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.
仅供参考，我知道在进行响应式设计时，您不应该如此具体，针对单个设备，但我这样做主要是为了测试，在这种情况下需要这样做。任何帮助，将不胜感激。
回答by Yoann
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.
我有一个 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";
}
}
I don't have time to make Opera.
我没有时间制作 Opera。
You can view the result herewith your Nexus 7
回答by André Figueira
To specifically target you can use:
要专门针对您可以使用：
@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}
This will get the nexus 7 and if you have iPhone targetting media queries they will remain in tact.
这将获得nexus 7，如果您有针对媒体查询的iPhone，它们将保持原样。
回答by davidcondrey
Nexus 7 (v1) 2012
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
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
回答by Oyster
You should try using a mix of inches for screen sizes and px for density/space
你应该尝试混合使用英寸作为屏幕尺寸和像素密度/空间
With this you can have a distinct layout for a galaxy nexus AND a nexus 7 without a bunch of lines for resolution!!
有了这个，你可以有一个不同的星系连接和一个连接 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)
{
}
Here an article about this: http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/
这里有一篇关于这个的文章：http: //ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/
回答by Shivanand Darur
Following code worked for me to target Nexus7 tab.
以下代码对我有用以定位 Nexus7 选项卡。
/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}
Don't forget to add the meta tag in your html. For example,
不要忘记在您的 html 中添加元标记。例如，
<meta name="viewport" content="width=device-width"/>
回答by Edwin Toh
The media queries that worked for me on Chrome on Nexus 7 were:
在 Nexus 7 上的 Chrome 上对我有用的媒体查询是：
@media only screen and (width : 600px) and (orientation: portrait) {
}
@media only screen and (width : 961px) and (orientation: landscape) {
}
回答by Samuel Charpentier
you can use the and expression to use multiple rules to the same media query
您可以使用 and 表达式对同一个媒体查询使用多个规则
@media screen and (min-width: 998px) and (max-width: 999px)
target any between 998px and 999px
目标介于 998px 和 999px 之间
