it-swarm-es.com

Optimizar el sitio web para dispositivos táctiles.

En un dispositivo táctil como iPhone/iPad/Android puede ser difícil presionar un botón pequeño con el dedo. No hay una forma de navegador cruzado para detectar dispositivos táctiles con las consultas de medios CSS que conozco. Así que verifico si el navegador tiene soporte para javascript touch events. Hasta ahora, otros navegadores no los han admitido, pero el último Google Chrome en el canal dev eventos táctiles habilitados (incluso para dispositivos no táctiles). Y sospecho que otros fabricantes de navegadores seguirán, ya que las computadoras portátiles con pantallas táctiles están llegando.. Actualización: fue un error en Chrome, por lo que ahora la detección de JavaScript funciona de nuevo .

Esta es la prueba que uso:

function isTouchDevice() {
    return "ontouchstart" in window;
}

El problema es que esto solo prueba si el navegador tiene soporte para eventos táctiles, no para el dispositivo.

¿Alguien sabe de la forma correcta [tm] de dar a los dispositivos táctiles una mejor experiencia de usuario? Aparte de sniffing user agent.

Mozilla tiene una consulta de medios para dispositivos táctiles. Pero no he visto nada igual en ningún otro navegador: https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

Actualización: quiero evitar el uso de una página/sitio separado para dispositivos móviles/táctiles. ¡La solución tiene que detectar dispositivos táctiles con detección de objetos o similar desde JavaScript, o incluir un CSS táctil personalizado sin que el agente de usuario rastree! La razón principal por la que pregunté fue para asegurarme de que no es posible hoy, antes de contactar al grupo de trabajo css3 . Así que no responda si no puede seguir los requisitos de la pregunta;)

66
gregers

Me parece que quieres tener una opción amigable con la pantalla táctil, para cubrir los siguientes escenarios:

  1. dispositivos similares a iPhone: pantalla pequeña, solo toque
  2. Pantallas pequeñas, sin contacto (no mencionaste esta)
  3. Pantallas grandes, sin contacto (es decir, ordenadores convencionales)
  4. Pantallas grandes habilitadas para pantalla táctil, como iPad, notebooks/pcs con pantallas táctiles.

Para los casos 1 y 2, probablemente necesitará un sitio separado o un archivo CSS que elimine gran cantidad de contenido innecesario y haga las cosas más grandes y más fáciles de leer/navegar. Si le preocupa el caso n. ° 2, siempre que los enlaces/botones de la página sean navegables por teclado, los casos 1 y 2 son equivalentes.

Para el caso 3 tienes tu sitio web normal. Para el caso 4, suena como si quisieras que las cosas que se pueden hacer clic sean más grandes o más fáciles de tocar. Si no es posible simplemente hacer que todo sea más grande para todos los usuarios, una hoja de estilo alternativa puede proporcionarle cambios de diseño fáciles de tocar.

Lo más fácil es proporcionar un enlace a la versión de pantalla táctil del sitio en algún lugar de la página. Para dispositivos táctiles conocidos, como el iPad, puede rastrear al agente de usuario y establecer la hoja de estilo táctil como predeterminada. Sin embargo, consideraría hacer esto por defecto para todos; Si su diseño se ve bien en el iPad, debería verse bien en cualquier portátil. Los usuarios de su mouse con habilidades de hacer clic menos que estelares estarán encantados de encontrar objetivos de clic más grandes, especialmente si agrega los efectos apropiados :hover o mouseover para que los usuarios sepan que se puede hacer clic.

Sé que dijiste que no quieres oler a los agentes de usuario. Pero sostendría que en este momento el estado del soporte del navegador para esto es demasiado inestable para preocuparse por la forma "correcta" de hacerlo. Los navegadores eventualmente proporcionarán la información que necesita, pero probablemente encontrará que pasarán años antes de que esta información sea ubicua.

22

¡Buenas noticias! El borrador del editor de CSS4 Media Queries ha incluido una nueva función de medios ' puntero '.

Los ejemplos típicos de un sistema de puntería "fino" son un mouse, un trackpad 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 consulta de medios desde JavaScript:

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

Actualizado el 11 de febrero. 2013 En Windows 8, las versiones recientes de Chrome (versión 24+) detectan el hardware táctil al iniciar la aplicación y exponen los eventos táctiles. Desafortunadamente, si "puntero: grueso" devuelve falso, 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 no ha implementado "puntero: bien" todavía, así que tampoco podemos verificarlo.

Actualización el 26 de septiembre. 2012 Probado en Safari en iOS6 y Chrome en Android 4.1.1 y aún no ha llegado. 'puntero' y 'hover' consultas de medios aterrizaron en WebKit 30 de mayo. Según el User-Agent, Safari usa la rama WebKit 536.26 desde el 25 de abril, y Chrome en Android usa e incluso una más antigua (535.19). No estoy seguro de que las ramas de WebKit de las cadenas User-Agent sean confiables, pero mi página de prueba tampoco puede detectar consultas de medios de puntero. La implementación desde mayo solo implementa la consulta de medios de puntero para dispositivos táctiles, por lo que puntero: bien no funcionará para dispositivos con un mouse.

15
gregers

No sé si una consulta de medios estandarizada como la de Mozilla resolverá el problema por sí misma. Como dijo uno de los desarrolladores de Chromium en la discusión que vinculaste, la presencia de soporte de eventos táctiles en el navegador no significa que los eventos táctiles se disparen, o incluso si lo hacen, que el usuario solo quiera 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 usará ese método de entrada; tal vez el dispositivo sea compatible con el mouse, el teclado y la entrada táctil, y el usuario prefiere el mouse o alguna combinación de los tres tipos de entrada.

Estoy de acuerdo con el desarrollador de Chromium en que admitir eventos táctiles no fue un error en el navegador. Un buen navegador debería admitir eventos táctiles, ya que podría estar instalado en un dispositivo que admita la entrada táctil. Es culpa del desarrollador del sitio web que tomó el soporte de eventos para que el usuario interactuara a través del toque.

Parece que necesitamos saber dos cosas: (1) ¿Cuáles son todos los tipos de entrada admitidos en el dispositivo? (2) ¿Cuáles son todos los tipos de eventos admitidos en el navegador?

Ya que no sabemos el número 1 en este momento, hay un enfoque propuesto por PPK de modo extravagante que me gusta. 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 IU en consecuencia. Obviamente eso es limitante para el desarrollador. No creo que sea un enfoque válido para su problema con el tamaño del enlace porque no quiere esperar a que la interacción altere la interfaz de usuario. El punto principal es presentar una IU 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 más que me duela decirlo, la búsqueda del agente de usuario parece ser el mejor enfoque.

pD. Espero, espero, espero que alguien venga aquí y me demuestre que estoy equivocado.

3
Michael Hixson

Google Chrome tiene un interruptor de línea de comando para habilitar eventos táctilesDeshabilitado por defecto. Entonces, 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 el 3 de junio de 2010 Esto realmente entró en la versión estable el 25 de mayo de 2010 :( No sé si fue un error o no.

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

Actualización 30 de septiembre de 2010 : supuestamente corregido en Chrome 6. Aún no ha tenido tiempo de bajar a estable para verificar. Dado que Chrome se actualiza automáticamente, este problema ya debería haberse ido :)

Lea esto si está considerando utilizar consultas de medios: 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 : W3C ahora está trabajando en un especificación de eventos táctiles , pero más o menos rechazado para ocultar eventos táctiles para terminales sin hardware táctil. Así que no espere que la detección de eventos táctiles funcione por mucho tiempo.

Actualización del 6 de junio de 2012 : La especificación de W3C CSS4 Media Queries (Editores Draft) tiene algo muy interesante. Ver mi respuesta por separado sobre esto.

3
gregers

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 funciones podría funcionar con javascript, sin embargo, hay problemas con diferentes eventos para diferentes dispositivos. PPK (el hombre detrás de quirksmode.org) está haciendo una gran cantidad de trabajo para verificar qué javascript es posible para cada dispositivo móvil/portátil, y está demostrando que nada parece ser estándar con estos dispositivos y aún así, TODAVÍA no se aplica a su Requisito para dispositivos táctiles portátiles.
(honestamente, no sé por qué le preocupa un dispositivo que aún no está listo, sea pragmático y preocupado por él una vez que esté aquí y pueda probarlo)

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

2
Dave Gregory

intente usar tablas y haga una celda completa para ser un enlace ... estoy trabajando en eso en mi sitio web ... no está funcionando bien hasta ahora ... pero es posible que encuentre una manera ... de esta manera, no necesita sobrecargar su sitio web con javascript y detección de funcionalidad ... puede darle un tamaño relativo de ejecución de un tamaño fijo ... y de esta manera, su sitio web puede verse en un escritorio como se ve en un iPhone ... Piensa en esta idea ... cualquier sugerencia es apreciada ...

0
Ismael Miguel
0
Divya Manian

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

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

0
sleske

Consulte http://crbug.com/136119 para obtener ayuda para agregar puntero: correcto en Chrome. En realidad, es posible detectar si el puntero: grueso es compatible (para distinguir el no configurado y el no compatible); solo cree la consulta de medios y compruebe en javascript si se analizó correctamente.

Por ejemplo, hoy aparece "@media (puntero: grueso)" en Chrome:

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

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

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