Consulta de mídia CSS do iPhone 5


132

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

3
Podemos ver suas consultas de mídia existentes?
BoltClock

Respostas:


283

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


2
Eu gosto dessa abordagem, mas não consegui fazê-la funcionar em uma visualização na web do aplicativo PhoneGap até adicionar -webkit-min-device-pixel-ratio, conforme explicado por Stephen Sprawl zsprawl.com/iOS/2012/09/css-media-queries-for -o-iphone-5 . tela @ media e (dispositivo-razão de aspecto: 40/71) e (-webkit-min-dispositivo-pixel relação: 2) {// iphone5 para teh phonegaps}
TaeKwonJoe

Eu tive que adicionar and (-webkit-min-device-pixel-ratio: 2)no iPhone consulta 5 meios para fazê-lo funcionar em PhoneGap webview como afirma @TaeKwonJoe
Mahendra Liya

1
Obrigado por atualizar isso para incluir o iPhone 6!
Maverick

Isso funciona muito bem quando eu preciso diferenciar iphone 4 e iphone 5 em css.
euccas

1
Para o iphone 6, (relação de aspecto do dispositivo: 667/375) não funcionava em um iphone físico real 6. No entanto, funcionava no simulador do iOS. Eu mudei para 375/667 e funcionou no dispositivo físico.
faça o que agora

64

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 */
}

1
Você pode sugerir como eu posso combinar essa consulta com a minha antiga para pegar o iphone 4 e 5?
Maverick

6
Cuidado, pois isso afetará outros telefones também - não apenas os iphones. Um exemplo é o Samsung Galaxy Nexus.
Mike Sweeney

@MikeSweeney Good call. Atualizei minha postagem com um novo método que não deve incluir outros dispositivos.
Eric

@ Eric É praticamente o que acabei decidindo depois de um monte de testes por telefone - tive que trazer altura à mistura! Parece estar funcionando muito bem nos 7-8 vários telefones em que testo.
21812 Mike Sweeney

esta linha está correta iPhone 5 and not to iOS 6:? Deveria ser: "iPhone5 e não para iPhone 6"?
SGNL

38

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.


10
Eu iria aprimoramento progressivo e móvel primeiro. Isso começa com o mobile e a construção usando min-device-width.
1813

2
Observe também que a solução de proporção altura / largura / proporção de pixels que corresponde apenas ao iPhone 5 também corresponderá ao próximo telefone que parece ter as mesmas características. O tema geral da sua resposta está correto: pensar em termos de dispositivos específicos é a maneira errada de proceder.
Pointy

@ Dan - mesmo que sua resposta não atenda diretamente à questão, ela é abordada em uma perspectiva mais ampla das práticas recomendadas para o design responsivo. As coisas que você escreveu aqui, na minha opinião, são muito profundas e práticas. Cinco estrelas.
Dimitri Vorontzov

@ Dan - tentando implementar sua sugestão, algo não está funcionando. Gostaria de pedir para você dar uma olhada: stackoverflow.com/questions/16486078/…
Dimitri Vorontzov 10/13/13

@primavera, por favor, diga o porquê. Qual é a vantagem de uma primeira abordagem móvel?
S ..

7

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)

7

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*/

}

Por que você precisa max-device-width : 568pxno retrato?
precisa saber é o seguinte

1
@ adi518 se você não usar max-width, em seguida, as regras CSS são aplicadas para qualquer maior dispositivo de 320px que é como, literalmente, a maioria dos dispositivos - tablets desktops etc
Sudheer

1
Por que não usar device-width: 320px and device-height: 568px?
adi518

5

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
}

5

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">


0

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)


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

    }
}

-3

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 */
}

1
Qual iPhone está usando uma taxa de pixels de dispositivo de 1,5?
BoltClock

1
Eu recomendo fazer consultas de mídia, dependendo da largura do dispositivo, e não do nome do dispositivo (iPhone). Portanto, se o iPhone 5 tiver mais largura, basta utilizá-lo.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.