iPhone 6 e 6 Plus Media Queries

Alguém sabe tamanhos específicos de ecrã para obter informações para iPhone 6 e 6+?

também, o tamanho dos ícones e os ecrãs de salpicos?

Author: Vadim Kotov, 2014-09-10
Source

7 answers

IPhone 6

  • Paisagem 

    @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)
{ }

  • Retrato 

    @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)
{ }

    se preferir, pode usar (device-width : 375px) e (device-height: 559px) no lugar das configurações de min- e max-.

    não é necessário usar todas estas configurações, e estas não são todas as configurações possíveis. Estas são apenas a maioria das opções possíveis para que você possa escolher e escolher as que atenderem às suas necessidades.

  • Utilizador Agente

    testado com o meu iPhone 6 (modelo MG6G2LL/A) com 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

  • Lançar imagens

    • 750 x 1334 (@2x) para retrato
    • 1334 x 750 (@2x) para a paisagem

  • Ícone da aplicação

    • 120 x 120

IPhone 6+

  • Paisagem 

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

  • Retrato 

    @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)
{ }
  • Lançamento imagens
    • 1242 x 2208 (@3x) para retrato
    • 2208 x 1242 (@3x) para a paisagem

  • Ícone da aplicação

    • 180 x 180

IPhone 6 e 6+

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

Previsto

De acordo com o site da Apple o iPhone 6 Plus terá 401 pixels por polegada e será 1920 x 1080. A versão menor do iPhone 6 será 1334 x 750 com 326 PPI.

Então, assumindo que a informação está correta, podemos escrever uma consulta de mídia para o 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) 
{ }

Note que dispositivo-proporções será depreciado em http://dev.w3.org/csswg/mediaqueries-4 / e substituído por

A largura mínima e a largura máxima podem ser algo como 1704 x 960.

Relógio de maçã (especulativo) As especificações do relógio ainda são um pouco especulativas, uma vez que (tanto quanto sei) não houve nenhuma folha oficial de especificações. ainda. Mas a Apple mencionou em este comunicado de imprensa que o relógio estará disponível em dois tamanhos.. 38mm e 42mm. Mais assumindo.. que esses tamanhos se referem ao tamanho da tela ao invés do tamanho geral da face do relógio essas consultas de mídia devem funcionar.. E tenho certeza que você poderia dar ou tomar alguns milímetros para cobrir qualquer cenário sem sacrificar qualquer alvo indesejado porque.. 
@media (!small) and (damn-small), (omfg) { }

Ou 

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }
Vale a pena notar que ... Consultas Nível 4 do W3C atualmente disponível apenas como um primeiro rascunho público, uma vez disponível para uso irá trazer com ele um monte de novos recursos projetados com dispositivos menores wearable como este em mente.
 157
Author: davidcondrey, 2015-08-08 07:39:38
Isto é o que está a funcionar para mim neste momento.

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
Author: Fiona - myaccessible.website, 2014-09-26 14:50:15

Isto funciona para mim para o 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
Author: activeping, 2014-11-20 00:29:18
Só para que saibas, o iPhone 6 mente sobre a largura mínima. Pensa que é 320 em vez de 375 é suposto ser. 
@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) {

}
Esta foi a única coisa que consegui trabalhar para atingir o iPhone 6. O 6+ funciona bem usando este método: 
@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}
 3
Author: DevelumPHP, 2014-09-23 22:07:53

Você tem que atingir o tamanho do ecrã usando a pesquisa multimédia para diferentes tamanhos de ecrã.

Para 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)
{ }

E para ecrã versão: 

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

}
 2
Author: RamThakur, 2015-03-18 15:29:37

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+ e 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 e 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) */ { 

}

Fonte: pesquisas multimédia para dispositivos normalizados

 2
Author: simhumileco, 2017-12-28 23:32:21

Para o iPhone 5, 

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

Para o iPhone 6,7,8 

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

Para iPhone 6+,7+,8+

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)
A trabalhar bem para mim a partir de agora.
 0
Author: jegadeesh, 2018-02-26 06:47:07