Consulta de mídia CSS do iPhone 5

O iPhone 5 tem uma tela mais longa e não está capturando a visualização móvel do meu site. Quais são as novas consultas de design responsivo para o iPhone 5 e posso combinar com as consultas existentes do iPhone?

Minha consulta de mídia atual é esta:

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

Outro recurso de mídia útil é device-aspect-ratio.

Observe que o iPhone 5 não possui uma proporção de 16: 9 . É de fato 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Referência:
Media Queries @ W3C Calculadora de formato de
comparação de modelo para iPhone

Existe isso, que eu credito a este blog :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Lembre-se de que ele reage ao iPhone 5, e não à versão específica do iOS instalada no dispositivo.

Para mesclar com sua versão existente, você deve poder delimitá-las por vírgula:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: Eu não testei o código acima, mas testei @mediaconsultas delimitadas por vírgula antes e elas funcionam muito bem.

Observe que o acima pode atingir alguns outros dispositivos que compartilham proporções semelhantes, como o Galaxy Nexus. Aqui está um método adicional que segmentará apenas dispositivos com uma dimensão de 640px (560px devido a algumas estranhas anomalias de pixel da tela) e um entre 960px (iPhone <5) e 1136px (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Todas essas respostas listadas acima, que usam max-device-widthou max-device-heightpara consultas de mídia, sofrem de bugs muito fortes: elas também têm como alvo muitos outros dispositivos móveis populares (provavelmente indesejados e nunca testados, ou que chegarão ao mercado no futuro).

Essas consultas funcionarão para qualquer dispositivo que tenha uma tela menor e provavelmente seu design será interrompido.

Combinada com consultas de mídia específicas para dispositivos semelhantes (para HTC, Samsung, IPod, Nexus ...), esta prática lançará uma bomba-relógio. Para debigging, essa idéia pode tornar seu CSS um spagetti não controlado. Você nunca pode testar todos os dispositivos possíveis.

Esteja ciente de que a única consulta de mídia sempre visando o IPhone5 e nada mais é:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Observe que a largura e a altura exatas, e não a largura máxima, estão marcadas aqui.

Agora, qual é a solução? Se você deseja escrever uma página da Web com boa aparência em todos os dispositivos possíveis, a melhor prática é usar a degradação

/ * padrão de degradação, estamos verificando a largura da tela com certeza, isso mudará está mudando de retrato para paisagem * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Se mais de 30% dos visitantes do seu site vierem de dispositivos móveis, vire esse esquema de cabeça para baixo, fornecendo uma abordagem para dispositivos móveis. Use min-device-widthnesse caso. Isso acelerará a renderização de páginas da Web para navegadores móveis.

para mim, a consulta que fez o trabalho foi:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5 em retrato e paisagem

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 em paisagem

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 em retrato

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Nenhuma resposta funciona para eu segmentar um aplicativo phonegapp.

Como o link a seguir aponta, a solução abaixo funciona.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Apenas uma adição muito rápida, pois tenho testado algumas opções e perdi isso ao longo do caminho. Verifique se sua página possui:

<meta name="viewport" content="initial-scale=1.0">

Você pode obter sua resposta com bastante facilidade para o iPhone5, juntamente com outros smartphones no banco de dados de recursos de mídia para dispositivos móveis:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Você pode até obter seus próprios valores de dispositivo na página de teste no mesmo site.

(Aviso: Este é o meu site)

afaik no iPhone usa uma proporção de pixels de 1,5

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Talvez você deva descer a "-webkit-min-device-pixel-ratio" para 1,5 para capturar todos os iPhones?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}