问题描述
我有两个用于测试网站设计的设备.三星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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！