web-dev-qa-db-fra.com

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

Je teste la conception de sites avec deux appareils. Tablette Samsung Galaxy Nexus et Asus Nexus 7. J'ai beaucoup de difficulté à comprendre comment cibler ces périphériques individuels avec des requêtes multimédia. Je ne suis pas sûr des valeurs à utiliser pour max-width ou à utiliser max-device-width. De plus, je ne sais pas dans quel ordre placer les requêtes des médias dans ...

Selon: 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

Je dois cibler les éléments suivants:

  • Galaxy Nexus Portrait et tablette
  • Galaxy Nexus Portrait
  • Galaxy Nexus Tablet
  • Nexus 7 Portrait et tablette
  • Nexus 7 Portrait
  • Nexus 7 Tablet

J'ai essayé les tests suivants mais je n'ai pas obtenu de bons résultats ... Je ne sais pas trop ce que je fais mal. J'étais un peu en train de jouer avec les chiffres pour essayer de comprendre ce qui fonctionnait ou non ...

/* 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 votre information, je sais que vous n'êtes pas censé être aussi spécifique, ciblant des périphériques individuels lorsque vous utilisez Responsive Design, mais je le fais principalement pour un test et je dois le faire dans ce cas. Toute aide serait appréciée.

csscss3responsive-designmobile-websitemedia-queries
14
Jake Wilson

J'ai un Nexus 7 et j'ai essayé votre logiciel. Le problème est que chaque navigateur a une fenêtre d'affichage différente. C'est donc complexe d'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 voir le résultat ici avec votre Nexus 7

7
Yoann

Pour cibler spécifiquement, vous pouvez utiliser: 

@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}

Cela aura le lien 7 et si vous avez des requêtes de médias ciblant l'iPhone, elles resteront intactes.

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

Vous devriez essayer d’utiliser un mélange de pouces pour les tailles d’écran et de px pour la densité/l’espace.

Avec cela, vous pouvez avoir une mise en page distincte pour un lien de galaxie ET un lien 7 sans un tas de lignes pour la 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)
{

}

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

0
Oyster

Le code suivant a fonctionné pour moi pour cibler l'onglet Nexus7.

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