Comment cibler Galaxy Nexus et Nexus 7 avec des requêtes média?

J'ai deux appareils que je suis en essais de conception de site avec. Samsung Galaxy Nexus et Asus Nexus 7 tablette. Je suis vraiment très dur à comprendre comment cibler ces appareils individuels avec les media queries. Je ne suis pas sûr de ce que les valeurs à utiliser pour max-width ou à utiliser max-device-width. Aussi je ne peux pas comprendre à quel ordre mettre les requêtes de média...

Selon: http://responsejs.com/labs/dimensions/

Galaxy Nexus Portrait: document.documentElement.clientWidth = 360
Galaxy Nexus Paysage: document.documentElement.clientWidth = 598
Nexus 7 Portrait: document.documentElement.clientWidth = 603
Nexus 7 Paysage: document.documentElement.clientWidth = 966

J'ai besoin de cibler les suivantes:

Galaxy Nexus Portrait et Tablette
Galaxy Nexus Portrait
Galaxy Nexus Tablette
Nexus 7 Portrait et Tablette
Nexus 7 Portrait
Nexus 7 Tablette

J'ai essayé les fins de test, mais n'ont pas de bons résultats... Pas sûr de ce que je fais mal. J'ai été un peu juste en jouant avec les numéros d'essayer de comprendre ce qui a fonctionné et ce qui n'a pas...

/* 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; }
}

Et pour info je sais que vous n'êtes pas vraiment censé être si précis, le ciblage des dispositifs individuels lors du Responsive Design, mais je le fais surtout pour un essai et un besoin de le faire dans ce cas. Toute aide serait appréciée.

source d'informationauteur Jake Wilson

J'ai une Nexus 7 et j'ai essayer votre sricpt. Le problème est que tous les navigateurs ont une autre fenêtre. Il est donc complexe pour avoir un résultat correct.

@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";
    }
}

Je n'ai pas le temps de faire de l'Opéra.

Vous pouvez afficher le résultat ici avec votre Nexus 7

2

Spécifiquement de la cible, vous pouvez utiliser:
```
@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}
```
Cette obtiendrez le nexus 7 et si vous avez un iPhone cibler les requêtes des médias, ils resteront dans le tact.

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

0

Vous devez essayer d'utiliser un mélange de cm pour des tailles d'écran et px pour la densité de l'espace

Avec cela, vous pouvez avoir une mise en place pour un galaxy nexus ET nexus 7 sans un tas de lignes de résolution!!
```
//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)
{

}
```
Ici un article à ce sujet:
http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/

Code suivant a travaillé pour moi de cible Nexus7 onglet.

/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}

N'oubliez pas d'ajouter la balise meta dans votre code html. Par exemple,

<meta name="viewport" content="width=device-width"/>

-2

Les requêtes de média qui a fonctionné pour moi sur Chrome sur la Nexus 7 ont été:

@media only screen and (width : 600px) and (orientation: portrait) {

}


@media only screen and (width : 961px) and (orientation: landscape) {

}

-3

vous pouvez utiliser l'expression et à l'utilisation de plusieurs règles pour les médias, de même que la requête
```
@media screen and (min-width: 998px) and (max-width: 999px)
```
cible tout entre 998px et 999px

Vous devez vous connecter pour publier un commentaire.