Wie kann ich bei Medienanfragen auf Galaxy Nexus und Nexus 7 zugreifen?
Ich habe zwei Geräte, mit denen ich das Site-Design teste. Samsung Galaxy Nexus und Asus Nexus 7 Tablet. Es fällt mir wirklich schwer, herauszufinden, wie ich diese einzelnen Geräte mit Medienabfragen ansprechen kann. Ich bin nicht sicher, welche Werte für max-width oder max-device-width verwendet werden sollen. Außerdem kann ich nicht herausfinden, in welcher Reihenfolge die Medienabfragen abgelegt werden sollen ...
Laut: 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
Ich muss Folgendes anvisieren:
- Galaxy Nexus Portrait und Tablet
- Galaxy Nexus Portrait
- Galaxy Nexus Tablet
- Nexus 7 Portrait und Tablet
- Nexus 7 Portrait
- Nexus 7 Tablet
Ich habe Folgendes zum Testen versucht, hatte aber keine guten Ergebnisse ... Ich bin nicht sicher, was ich falsch mache. Ich habe nur ein bisschen mit den Zahlen rumgespielt und versucht herauszufinden, was funktioniert und was nicht ...
/* 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; }
}
Und zu Ihrer Information, ich weiß, dass Sie eigentlich nicht so spezifisch sein sollten, wenn Sie Responsive Design auf einzelne Geräte ausrichten, aber ich mache dies hauptsächlich als Test und muss es in diesem Fall tun. Jede Hilfe wäre dankbar.
Ich habe ein Nexus 7 und ich habe versucht, Ihren sricpt. Das Problem ist, dass jeder Browser einen anderen Darstellungsbereich hat. Es ist also komplex, ein korrektes Ergebnis zu haben.
@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";
}
}
Ich habe keine Zeit, um Opera zu machen.
Sie können das Ergebnis hier mit Ihrem Nexus 7 sehen
Um gezielt zu zielen, können Sie Folgendes verwenden:
@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}
Dadurch erhalten Sie den Nexus 7, und wenn Sie iPhone-Targeting-Medienanfragen haben, bleiben diese im Takt.
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
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
Sie sollten versuchen, eine Mischung aus Zoll für Bildschirmgrößen und px für Dichte/Raum zu verwenden
Mit diesem können Sie ein eindeutiges Layout für einen Galaxie-Nexus UND einen Nexus 7 ohne eine Reihe von Zeilen für die Auflösung festlegen.
// 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)
{
}
Hier ein Artikel dazu: http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/
Der folgende Code funktionierte für mich, um den Tab Nexus7 anzusprechen.
/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}
Vergessen Sie nicht, das Meta-Tag in Ihre HTML-Datei einzufügen. Zum Beispiel,
<meta name="viewport" content="width=device-width"/>