web-dev-qa-db-fra.com

requêtes multimédia sur iPhone 6 et 6 Plus

Est-ce que quelqu'un connaît des tailles d'écran spécifiques pour cibler les requêtes multimédia pour iPhone 6 et 6 Plus?

Aussi, les tailles d'icônes et les écrans de démarrage?

ioscss3media-queriesiphone-6iphone-6-plus
68
MattT

iphone 6

  • Landscape

    @media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

  • Portrait

    @media only screen 
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

    si vous préférez, vous pouvez utiliser (device-width : 375px) et (device-height: 559px) à la place des paramètres min- et max-.

    Il n'est pas nécessaire d'utiliser tous ces paramètres, et ce ne sont pas tous les paramètres possibles. Ce ne sont que la majorité des options possibles pour que vous puissiez choisir celles qui répondent à vos besoins.

  • Agent utilisateur

    testé avec mon iPhone 6 (modèle MG6G2LL/A) avec iOS 9.0 (13A4305g)

    # Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
# Google Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
# Mercury
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53

  • Lancer des images

    • 750 x 1334 (@ 2x) pour portrait
    • 1334 x 750 (@ 2x) pour le paysage

  • Icône de l'application

    • 120 x 120

iPhone 6+

  • Landscape

    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
{ }

  • Portrait

    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3)
{ }

  • Lancer des images

    • 1242 x 2208 (@ 3x) pour portrait
    • 2208 x 1242 (@ 3x) pour le paysage

  • Icône de l'application

    • 180 x 180

iPhone 6 et 6+

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

Prédit

Selon le site Web Apple l'iPhone 6 Plus aura une résolution de 401 pixels par pouce et une résolution de 1920 x 1080. La version la plus petite de l'iPhone 6 sera de 1334 x 750 avec 326 PPI.

En supposant que ces informations soient correctes, nous pouvons écrire une requête multimédia pour l'iPhone 6:

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

Notez que device-aspect-ratio sera obsolète dans http://dev.w3.org/csswg/mediaqueries-4/ et remplacé par aspect-ratio

Min-width et max-width peuvent être quelque chose comme 1704 x 960.

Apple Watch (spéculative)

Les spécifications de la montre sont encore un peu spéculatives car (à ma connaissance, il n’ya pas encore de fiche technique officielle). Mais Apple a mentionné dans ce communiqué de presse que la Watch sera disponible en deux tailles .. 38mm et 42mm.

En supposant en outre que ces tailles se rapportent à la taille de l'écran plutôt qu'à la taille globale du visage de la montre, ces requêtes médias devraient fonctionner. parce que.. 

@media (!small) and (damn-small), (omfg) { }

ou

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

Il convient de noter que Media Queries Level 4 du W3C, actuellement disponible uniquement en tant que premier projet public, une fois qu’il sera disponible, il apportera de nombreuses nouvelles fonctionnalités conçues pour de plus petits appareils portables comme celui-ci.

160
davidcondrey

C'est ce qui fonctionne pour moi en ce moment:

iphone 6

@media only screen and (max-device-width: 667px) 
    and (-webkit-device-pixel-ratio: 2) {

iPhone 6+

@media screen and (min-device-width : 414px) 
    and (-webkit-device-pixel-ratio: 3)
17
Fiona - myaccessible.website

Cela fonctionne pour moi pour l'iphone 6

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 

}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 

}

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 

}

/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 

}

/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 

}
6
activeping

Juste pour que vous sachiez que l'iPhone 6 ment à propos de son min-width. Il pense qu'il est supposé être 320 au lieu de 375. 

@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) {

}

C’était la seule chose à laquelle je pouvais me mettre au travail pour cibler l’iPhone 6. Les 6 ans et plus fonctionnent parfaitement avec cette méthode: 

@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}
3
DevelumPHP

Vous devez cibler la taille de l'écran à l'aide d'une requête multimédia pour une taille d'écran différente.

pour iphone:

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{ }

et pour version de bureau:

@media only screen (max-width: 1080){

}
2
RamThakur

iPhone X

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6+, 7+ et 8+

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6, 6S, 7 et 8

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

Source: Requêtes de média pour périphériques standard

2
simhumileco

Pour iPhone 5,

@media screen and (device-aspect-ratio: 40/71)

pour iPhone 6,7,8

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)

pour iPhone 6 +, 7 +, 8 +

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)

Travaille bien pour moi à partir de maintenant.

0
jegadeesh