it-swarm-pt.tech

Os navegadores iPhone/Android são compatíveis com o CSS @media handheld?

Quero alterar o CSS da minha página da Web para navegadores da Web executados em celulares, como o iPhone e o Android. Eu tentei algo parecido com isto no arquivo CSS:

@media handheld {
  body {
    color: red;
    }
  }

Mas isso não parece ter nenhum efeito, pelo menos no iPhone. Como posso escrever o meu CSS para funcionar de forma diferente no iPhone etc, idealmente sem o uso de javascript?

47
Colen

A partir de este site existem algumas outras consultas de multimédia que são úteis na segmentação de iPhones/telemóveis Android:

    // target mobile devices
@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    // CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
    // CSS goes here
}

Consegui usar com êxito a consulta de mídia de largura máxima do dispositivo para segmentar com sucesso telefones Android, embora eu precise ajustar a largura para 800 px em vez dos 480 listados. Para o iPhone 4, a razão -webkit-min-device-pixel-ratio funcionou para atingir o iPhone4 (max-device-width: 480px não, presumo que o iPhone3 seja o alvo, mas não tenha um prático para testar).

Eu posso ver isso ficando muito confuso, mas se você tem que suportar uma infinidade de dispositivos e ter personalizado CSS para cada um deles, desde que eles suportam consultas de mídia, aparece como é possível fazer o que você tem que Tweak cada plataforma . E sim, eu codificaria primeiro os padrões, de modo que o CSS seja o mais resuível, mas muitas vezes estamos falando em apresentar layouts alternativos nos dias de hoje, dimensionados adequadamente para os dispositivos que estão sendo usados.

29
LocalPCGuy

@media handheld refere-se apenas aos antigos e minúsculos celulares proto-html de anos passados ​​que nem mesmo podiam exibir páginas web. O ePUB, MOBI, Tablet, comunidade de fornecedores todos disseram enfaticamente "H * ck não, estamosnão@media handheld dispositivos!" porque eles estavam corretamente preocupados que isso os colocaria para sempre em uma terra de ninguém subserviente a páginas da web "reais".

Com os pequenos dispositivos de hoje com telas de alta resolução, ainda não temos uma boa maneira de dizer ao HTML como exibir as coisas "corretamente" em telas grandes com resolução relativamente baixa em comparação a telas pequenas com resolução muito alta. E como um velho peido certificado, meus olhos gostariam de lembrá-lo de que não, a resposta não é apenas fazer com que tudo inclua fontes 2X menores.

19
Jim Adcock

Não, nem os navegadores iPhone ou Android suportam CSS @media handheld.

5
Jonas Äppelgran

Veja como usar a consulta de mídia "pairar".

Coloque isso no seu arquivo SCSS:

// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's etc).
$point-at-which-use-large-screens: (min-width 990px) (hover hover);

.some-class-you-want-to-target {

  // Some CSS to only apply to larger screens with mouse available.
  @include breakpoint($point-at-which-use-large-screens) {
    color: red;
  }
}

Depois de executar grunhido etc no SCSS isso vai produzir CSS parecido com:

@media (min-width: 991px) and (hover: hover) {
  color:red;
}
0
bailey86