consultas de mídia CSS: dispositivos móveis alvo sem especificar largura, relação de pixel, etc

Question

Vamos dizer que eu só quero direcionar cada tablet e telefone, independentemente do tamanho, há uma consulta de mídia para isso? É possível fazer isso sem especificar um tamanho? Ou está usando um tamanho a única maneira de segmentar por dispositivos móveis, e não desktops?

Answer 1

Na CSS3 especificações , @media handeld é mencionado mas tem talvez nenhum suporte ao navegador.

Assim, não.

No entanto, você pode encontrar neste site útil, ele explica outra alguma consulta de mídia técnicas para móvel.

Answer 2

Eu estive lutando com isso por alguns dias, mas uma boa maneira de verificar se há dispositivos portáteis é o max-device-width. do PC desktop não enviá-lo para o navegador, mas a maioria (se não todos) handhelds fazer usar isso.

No meu caso eu queria mostrar uma versão compactada do site em todos os dispositivos (incluindo desktop) quando abaixo de uma determinada largura, para o qual eu usei

@media all and (max-width: 640px)

Mas um certo pop-up sobreposição que position: fixed usado teve que ser mudado em handhelds única (porque a propriedade css funciona em todos os navegadores de desktop, mas não em todos os handhelds). Então, para que eu usei uma regra adicional:

@media all and (max-device-width: 640px)

Em que posso segmentar todos os dispositivos portáteis abaixo de 640, mas não navegadores desktop. Aliás, isso também não se destina iPads (que é como eu queria) porque tem uma largura do dispositivo maior que 640px.

Se você quiser apenas para direcionar todos os dispositivos apenas escolher uma largura min baixa (1px) para que ele não exclui qualquer dispositivo, independentemente da largura.

Answer 3

Eu não acho que você vai ter muita sorte com uma abordagem css puro. Você vai querer fazer algo ao longo das linhas dos modernizer.js aproximar e nos JS para detectar dispositivo e acrescentar um nome de classe de corpo com base nisso.

Qual é a melhor maneira para detectar um dispositivo móvel em jQuery?

Em seguida, incluem essa classe em suas consultas de mídia para dispositivos móveis caso especial de tamanhos variados.