Optimizar el sitio web para dispositivos táctiles

¡Buenas noticias! El borrador del editor de CSS4 Media Queries ha incluido una nueva característica de medios 'puntero'.

Los ejemplos típicos de un sistema de puntería 'fino' son un ratón, un track-pad o una pantalla táctil basada en un lápiz óptico. Las pantallas táctiles basadas en los dedos calificarían como'gruesas'.

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

También es posible probar la media query desde JavaScript:

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

Actualizado Feb. 11. 2013 En Windows 8 versiones recientes de Chrome (versión 24+) detectar touch-hardware al iniciar la aplicación y exponer eventos táctiles. Desafortunadamente si "pointer: coarse" devuelve false, no hay manera de saber si es porque las consultas de medios de puntero no están implementadas o porque hay un puntero fino. WebKit aún no ha implementado "pointer:fine", así que tampoco podemos comprobarlo.

Actualización Sept. 26. 2012 Probado en Safari en iOS6 y Chrome en Android 4.1.1 y todavía no está allí. 'puntero' y 'hover' media-queries aterrizó en WebKit el 30 de mayo. Según el User-Agent, Safari utiliza la rama WebKit536.26 a partir del 25 de abril, y Chrome en Android utiliza e incluso más antiguo (535.19). No estoy seguro de que las ramas de WebKit de las cadenas de Agente de usuario sean de confianza, pero mi página de prueba tampoco es capaz de detectar consultas de medios de puntero. La implementación de May solo implementa la consulta de medios de puntero para dispositivos táctiles, por lo que pointer: fine no funcionará para dispositivos con un mouse.

No se si una consulta de medios estandarizada como la de Mozilla resolverá el problema por sí misma. Como uno de los desarrolladores de Chromium dijo en esa discusión que vinculó, la presencia de soporte de eventos táctiles en el navegador no significa que los eventos táctiles puedan o se disparen, o incluso si lo hacen, que el usuario solo querrá interactuar a través de la entrada táctil. Del mismo modo, la presencia de soporte de entrada táctil en el dispositivo no significa que el usuario utilizará ese método de entrada, tal vez el dispositivo sea compatible con el mouse, teclado, y la entrada táctil y el usuario prefiere el ratón o alguna combinación de los tres tipos de entrada.

Estoy de acuerdo con el desarrollador de Chromium que soportar eventos táctiles no fue un error en el navegador. Un buen navegador debe admitir eventos táctiles porque puede estar instalado en un dispositivo que admita la entrada táctil. Es culpa del desarrollador del sitio web que tomara el soporte del evento para significar que el usuario estaría interactuando a través del tacto.

Parece Que necesitamos saber dos cosas: (1) ¿Qué son todos los tipos de entrada soportados en el dispositivo (2) ¿Cuáles son todos los tipos de eventos soportados en el navegador

Dado que no sabemos #1 en este momento, hay un enfoque propuesto por PPK de quirksmode que me gusta. Él habla de ello aquí: http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

Básicamente, escuche los eventos táctiles y los eventos del mouse, y cuando ocurran, configure la interfaz de usuario en consecuencia. Obviamente eso se limita al desarrollador. No creo es un enfoque válido para su problema con el tamaño del enlace porque no desea esperar a que la interacción altere la interfaz de usuario. El punto es presentar una interfaz de usuario diferente (un enlace más grande/más pequeño) antes de que ocurra cualquier interacción.

Espero que hagas tu propuesta y se incluya en CSS3. Hasta entonces, por mucho que me duela decirlo, la inhalación de agentes de usuario parece el mejor enfoque.

P. S. Espero esperanza esperanza alguien viene aquí y demuestra que me equivoco

Google Chrome tiene un interruptor de línea de comandos para habilitar los eventos táctiles. Desactivado por defecto. Así que hasta que los habiliten para todos nuevamente (con suerte no lo harán), es posible detectar el contacto con la ayuda de javascript como describí en la pregunta..

Actualización jun 3 2010: Esto realmente entró en la versión estable el 25 de mayo de 2010 :( No lo sé, fue un error o no.

Han discutido el tema en la lista de correo del w3c, pero dudo que algo suceda muy pronto. http://lists.w3.org/Archives/Public/www-style/2010May/0411.html Podrían discutir esto durante el TPAC en noviembre.

Actualización sep 30 2010 : Supuestamente arreglado en Chrome 6. Aún no he tenido tiempo de bajar a estable para verificar. Desde Chrome actualizar automáticamente este problema ya debería haber desaparecido :)

Lea esto si está considerando usar medios consulta: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold / y http://www.quirksmode.org/blog/archives/2010/09/more_about_medi.html

Actualización del 16 de mayo de 2011 : El W3C ahora está trabajando en una especificación de eventos táctiles , pero más o menos se negó a ocultar eventos táctiles para terminales sin hardware táctil. Por lo tanto, no espere que la detección de eventos táctiles funcione por mucho tiempo.

Actualización 6 de junio de 2012: Los medios de comunicación CSS4 del W3C Las consultas (Borrador de editores) tienen algo muy interesante. Ver mi respuesta separada sobre esto.

No, no hay tal cosa. CSS tiene la opción de tamaño de pantalla, que le permitirá optimizar el diseño, pero eso es todo. También hay media="handheld", pero eso tampoco se aplica a sus requisitos.

La detección de características puede funcionar con javascript, sin embargo, hay problemas con diferentes eventos para diferentes dispositivos. PPK (el hombre detrás quirksmode.org) está haciendo una gran cantidad de trabajo comprobando qué javascript es posible para cada dispositivo móvil / portátil,y está demostrando que nada parece para ser estándar con estos dispositivos y, sin embargo, esto todavía no se aplica a su requisito para dispositivos portátiles táctiles.
(honestamente, no sé por qué te preocupa un dispositivo que aún no está fuera, sé pragmático y preocúpate por él una vez que esté aquí y puedes probarlo)

El trabajo de PPK en el navegador móvil y los eventos táctiles, le ahorrará horas. Échale un vistazo aquí

Apple tiene TouchEvents definidos solo para iPhone OS FWIW

No es una solución completa, pero es posible que desee simplemente evitar cualquier botón pequeño. Si bien los botones pequeños son más un problema de usabilidad en dispositivos táctiles, siempre son difíciles de usar, incluso con una pantalla grande y un mouse.

Si solo prestas atención al uso de botones adecuadamente grandes con suficiente espacio entre ellos, todos se beneficiarán. Además, te obligará a no saturar tu interfaz con demasiados botones pequeños: -).

Intente usar tablas y haga que una celda completa sea un enlace... estoy trabajando en eso en mi sitio web... no está funcionando bien hasta ahora... pero podrías encontrar una manera... de esta manera, no es necesario sobrecargar su sitio web con javascript y detección de funcionalidad... usted puede darle un tamaño relativo instread de un tamaño fijo... y de esta manera, su sitio web se puede ver en un escritorio como se ve en un iphone... piensa en esta idea... cualquier sugerencia es apreciada...

Véase http://crbug.com/136119 para soporte para agregar puntero:fine en Chrome. En realidad, es posible detectar si pointer: coarse es compatible (para distinguir unset de not supported): simplemente cree la consulta de medios usted mismo y pruebe en javascript si se analizó correctamente.

Eg., hoy "@media (puntero: grueso) " en Chrome aparece:

> document.styleSheets[0].rules[5].media[0]
"(pointer: coarse)"

Pero los valores falsos no soportados como "@media (puntero: otro) " no lo hacen:

> document.styleSheets[0].rules[8].media[0]
"not all"

No tendrá ningún control sobre la detección de toques, e incluso si hizo los pasos lógicos para averiguar qué es exactamente lo que el usuario está tratando de tocar es complejo y mejor manejado por el propio dispositivo.

Lo mejor es crear una versión móvil del sitio o una hoja de estilos alternativa que se cargue cuando detecte un dispositivo móvil con Javascript.

Si está utilizando PHP, esta es una buena solución:

Http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php /

Puede detectar si el navegador es un teléfono desde el lado del servidor olfateando los detalles de la solicitud del navegador, y si es así, mostrar hojas de estilo alternativas/extra/js/html