it-swarm.com.de

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.

14
Jake Wilson

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

7
Yoann

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.

2
André Figueira

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
1
davidcondrey

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/

0
Oyster

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"/>
0
Shivanand Darur