Detectar se é utilizado um navegador num dispositivo móvel (iOS / Android phone / tablet)
Existe uma forma de detectar se é usado um navegador de mão (iOS/Android phone/tablet)?
tentei isto com o objectivo de fazer um elemento meio largo num navegador de um dispositivo portátil, mas não faz diferença.
width: 600px;
@media handheld { width: 300px; }
Editar: da página indicada na resposta do jmaes que usei
@media only screen and (max-device-width: 480px).
6 answers
Update (June 2016): eu agora tento suportar o toque e a entrada do mouse em cada resolução, uma vez que a paisagem do dispositivo está lentamente borrando as linhas entre o que as coisas são e não são dispositivos de toque. os profissionais do iPad são apenas tocados com a resolução de um laptop de 13". Os laptops Windows agora frequentemente vêm com telas de toque.
Outras respostas semelhantes (ver outra resposta sobre esta questão) podem ter diferentes maneiras de tentar descobrir que tipo de dispositivo o Utilizador está a usar, mas nenhuma são à prova de tolos. Encorajo-o a verificar essas respostas, se precisar mesmo de tentar determinar o dispositivo.
Os IPhones, por exemplo, ignoram a consulta {[[0]} (Fonte ). E eu não ficaria surpreso se outros smartphones também, por razões semelhantes.
A melhor maneira actual que uso para detectar um dispositivo móvel é saber a sua largura e usar a correspondente pesquisa multimédia para o apanhar. Esse link lista alguns populares. Uma pesquisa rápida no Google dar-te-ia outros de que precises, tenho a certeza.
Para mais iPhone específico (como Retina display), confira o primeiro link que eu postei.
A detectar dispositivos móveis
Resposta relacionada: https://stackoverflow.com/a/13805337/1306809
Não há uma única abordagem que seja verdadeiramente infalível. A melhor aposta é misturar e combinar uma variedade de Truques conforme necessário, para aumentar as chances de detectar com sucesso uma gama mais ampla de dispositivos de mão. Veja o link acima para algumas opções diferentes.Hoje em dia (2016) há uma maneira de detectar pontos por polegadas/cm/px que parece funcionar na maioria dos navegadores modernos (ver http://caniuse.com/#feat=css-media-resolution). Eu precisava de um método para distinguir entre um relativamente pequeno ecrã, orientação, não importa, e estacionária, monitor de computador.
Como muitos navegadores móveis não suportam isto, pode-se escrever o código geral css para todos os casos e usar esta excepção para ecrãs grandes:
@media (max-resolution: 1dppx) {
/* ... */
}
Tanto o Windows XP como o 7 têm a configuração predefinida de 1 ponto por pixel (ou 96dpi). Não sei sobre outros sistemas operacionais, mas isto funciona muito bem para as minhas necessidades.
Editar: o dppx {[14] }não parece funcionar no Internet Explorer.. usar (96)PPP em alternativa.
Os dispositivos móveis têm uma altura superior à largura, pelo contrário, os computadores têm uma largura superior à altura. Por exemplo:
@media all and (max-width: 320px) and (min-height: 320px)
@media (pointer:none), (pointer:coarse) {
}
Com Base em https://stackoverflow.com/a/42835826/1365066
Mozilla / 5.0 (iPhone; CPU iPhone os 10_ 3_2 como Mac OS X) AppleWebKit/603.2.4 (KHTML, como Gecko) Version / 10.0 Mobile / 14F89 Safari/602.1
Note que este texto contém duas palavras-chave telltale: iPhone e Mobile. Outros strings de agente de usuário para dispositivos que eu não tenho são fornecidos at:
Https://deviceatlas.com/blog/list-of-user-agent-strings
Usando este texto, configurei uma variável JavaScript booleana bMobile no meu site para Verdadeiro ou falso usando o seguinte código:
var bMobile = // will be true if running on a mobile device
navigator.userAgent.indexOf( "Mobile" ) !== -1 ||
navigator.userAgent.indexOf( "iPhone" ) !== -1 ||
navigator.userAgent.indexOf( "Android" ) !== -1 ||
navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;