Qual é a maneira mais segura, usando consultas de mídia, de fazer algo acontecer quando não estiver em um dispositivo com tela de toque? Se não houver maneira, você sugere usar uma solução JavaScript como !window.Touch
Modernizr ou?
Qual é a maneira mais segura, usando consultas de mídia, de fazer algo acontecer quando não estiver em um dispositivo com tela de toque? Se não houver maneira, você sugere usar uma solução JavaScript como !window.Touch
Modernizr ou?
Respostas:
Eu sugeriria o uso de modernizr e seus recursos de consulta de mídia.
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
No entanto, usando CSS, existem pseudo classes como, por exemplo, no Firefox. Você pode usar : -moz-system-metric (ativado por toque) . Mas esses recursos não estão disponíveis para todos os navegadores.
Para dispositivos Apple , você pode usar de maneira simples:
if(window.TouchEvent) {
//.....
}
Especialmente para o Ipad:
if(window.Touch) {
//....
}
Mas, eles não funcionam no Android .
O Modernizr oferece recursos de detecção de recursos e a detecção de recursos é uma boa maneira de codificar, em vez de codificar com base em navegadores.
O modernizador adiciona classes à tag HTML para esse fim exato. Nesse caso, touch
e no-touch
para que você possa estilizar os aspectos relacionados ao toque, prefixe seus seletores com .touch. por exemplo .touch .your-container
. Créditos: Ben Swinburne
modernizr
será perfeito :)
Modernizr.touch
teste indica apenas se o navegador suporta eventos de toque, o que não reflete necessariamente um dispositivo de tela de toque. Por exemplo, os telefones Palm Pre / WebOS (touch) não suportam eventos de toque e, portanto, são reprovados neste teste.
touch
e no-touch
para que você possa estilizar os aspectos relacionados ao toque, prefixe seus seletores .touch
. Por exemplo.touch .your-container
Na verdade, existe uma propriedade para isso no rascunho da consulta de mídia CSS4 .
O recurso de mídia 'ponteiro' é usado para consultar a presença e a precisão de um dispositivo apontador, como um mouse. Se um dispositivo tiver vários mecanismos de entrada, é recomendável que o UA relate as características do dispositivo apontador menos capaz dos mecanismos de entrada primários. Esta consulta de mídia aceita os seguintes valores:
'none'
- O mecanismo de entrada do dispositivo não inclui um dispositivo apontador.'grosso'
- O mecanismo de entrada do dispositivo inclui um dispositivo apontador de precisão limitada.'fino'
- O mecanismo de entrada do dispositivo inclui um dispositivo apontador preciso.
Isso seria usado como tal:
/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}
Eu também encontrei um ticket no projeto Chromium relacionado a isso.
A compatibilidade do navegador pode ser testada no Quirksmode . Estes são os meus resultados (22 de janeiro de 2013):
As soluções CSS não parecem estar amplamente disponíveis em meados de 2013. Em vez de...
Nicholas Zakas explica que o Modernizr aplica uma no-touch
classe CSS quando o navegador não suporta o toque.
Ou detecte no JavaScript com um simples trecho de código, permitindo implementar sua própria solução Modernizr:
<script>
document.documentElement.className +=
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>
Então você pode escrever seu CSS como:
.no-touch .myClass {
...
}
.touch .myClass {
...
}
Os tipos de mídia não permitem detectar recursos de toque como parte do padrão:
http://www.w3.org/TR/css3-mediaqueries/
Portanto, não há como fazê-lo de forma consistente por meio de CSS ou consultas de mídia, você precisará recorrer ao JavaScript.
Não é necessário usar o Modernizr, você pode simplesmente usar JavaScript simples:
<script type="text/javascript">
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device) alert("touch is enabled!");
</script>
window.touch
&& window.TouchEvent
funcionam apenas para dispositivos Apple.
Em 2017, a consulta de mídia CSS da segunda resposta ainda não funciona no Firefox. Encontrei uma solução para isso: -moz-touch-enabled
Então, aqui está a consulta de mídia entre navegadores:
@media (-moz-touch-enabled: 1), (pointer:coarse) {
.something {
its: working;
}
}
-moz-touch-enabled
não será necessário em breve
-moz-touch-enabled
supostamente não é suportado no Firefox 58+. Por exemplo, esta solução não abrange o Firefox 58-63 (já que o Firefox 64+ suporta a consulta de ponteiro). Fonte: developer.mozilla.org/pt-BR/docs/Web/CSS/@media/…
Na verdade, existe uma consulta de mídia para isso:
@media (hover: none) { … }
Além do Firefox, é bastante bem suportado . Sendo o Safari e o Chrome os navegadores mais comuns em dispositivos móveis, pode ser suficiente até uma adoção maior.
Esta solução funcionará até que o CSS4 seja globalmente suportado por todos os navegadores. Quando esse dia chegar, use CSS4. mas até então, isso funciona para navegadores atuais.
browser-util.js
export const isMobile = {
android: () => navigator.userAgent.match(/Android/i),
blackberry: () => navigator.userAgent.match(/BlackBerry/i),
ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
opera: () => navigator.userAgent.match(/Opera Mini/i),
windows: () => navigator.userAgent.match(/IEMobile/i),
any: () => (isMobile.android() || isMobile.blackberry() ||
isMobile.ios() || isMobile.opera() || isMobile.windows())
};
carregando:
à moda antiga:
isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;
maneira mais recente:
isMobile.any() ? document.body.classList.add('is-touch') : null;
O código acima adicionará a classe "is-touch" à etiqueta do corpo, se o dispositivo tiver uma tela de toque. Agora, qualquer local em seu aplicativo da Web onde você teria CSS para: pairar, você pode chamarbody:not(.is-touch) the_rest_of_my_css:hover
por exemplo:
button:hover
torna-se:
body:not(.is-touch) button:hover
Esta solução evita o uso do modernizador, pois a biblioteca modernizadora é uma biblioteca muito grande. Se tudo o que você está tentando fazer é detectar telas sensíveis ao toque, será melhor quando o tamanho da fonte compilada final for um requisito.
Consegui resolver esse problema usando este
@media (hover:none), (hover:on-demand) {
Your class or ID{
attributes
}
}
on-demand
foi removido das especificações e dos navegadores: github.com/w3c/csswg-drafts/commit/…