consultas de mídia para iPhone 6 e 6 Plus

consultas de mídia específicas podem ser usadas para segmentar dispositivos como o iPhone 6 e 6 Plus. Essas consultas utilizam vários parâmetros para identificar com precisão os dispositivos direcionados com base em seus tamanhos de tela, resoluções e outras características específicas do dispositivo. Empregado:

paispes

@mídia somente Screen e (Min-Device-Width: 375px) e (max-device-width: 667px) e (orientação: paisagem) e (-webkit-min-device-pixel-ratio: 2) {}

• retrato

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

• inicie o imagens
  retrato: 750 x 1334 (@2x)

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

  paisagem: 1334 x 750 (@2x)
icon e icon: 120 x 120
• Para o iPhone 6 Plus, use estas consultas de mídia:
• Landscape

@Screen Somente Media Screen Screen e (Min-Device-Width: 414px) e (Max-Device-Width: 736px) e (orientação: paisagem) e (-webkit-min-device-pixel-ratio: 3) {}

retrato

@tela apenas mídia e (Min-Device-Width: 414px) e (Max-Device-Width: 736px) e (Orientação: Retrato) e (-webkit-min-device-pixel-ratio: 3) {}

• inicie o imagens

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

paisagem: 2208 x 1242 (@3x)
• App icon: 180 x 18 [1842 6 e 6 Plus

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

@Media Somente Screen e (max-device-width: 640px), apenas tela e (max-device-lar: 667px), apenas tela e (max-largura: 480px) {}
• Previsão de dispositivo para futuras versões
A Apple divulgou informações limitadas sobre dispositivos futuros, como o iPhone 7 e o Apple Watch. No entanto, com base nas especificações do iPhone 6 e 6 Plus e assumindo convenções de nomeação semelhantes, as seguintes consultas de mídia podem ser úteis no futuro:

iPhone 7 (previsto): @tela de mídia e (Min-Device-Width: 1080px) e (Max-Device-Width: 1920px) e (Min-resolução: 401dpi) e (Ratio-Ratio de dispositivo: 16/9) {} tela @media e (Min-Device-Width: 750px) e (max-device-width: 1334px) e (Min-resolução: 326dpi) {}

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

assumindo um tamanho de tela em torno de 40mm-42mm:

@mídia (MAX-DEVICE-LODA: 42mm) e (Min-Device-Width: 38mm) {}