El método estándar de adaptación del dispositivo es la detección del Agente de usuario, que se puede hacer en el servidor o el cliente. Esto a veces se combina con la detección de funciones mediante las cuales se verifica si el dispositivo tiene ciertas capacidades conocidas para que pueda mostrar, por ejemplo, vistas de webkit a teléfonos inteligentes y un sitio XHTML-MP más básico a teléfonos menos capaces, y / o detección de pantalla -tamaño utilizando código del lado del cliente. Sus opciones para hacer todo esto son numerosas y dependen de la pila de desarrollo y hosting con la que esté trabajando.
Algunos ejemplos:
Lado del cliente
- Si tiene una aplicación web y una aplicación móvil nativa, ¿cómo canaliza mejor a los usuarios de uno a otro? (¿Deberías incluso intentar hacer esto?)
- Tengo un sitio web móvil, ¿por qué necesito una aplicación móvil?
- ¿Cuáles son algunas de las formas en que HTML5 debería reemplazar a JavaScript?
- ¿A qué debo prestar atención al crear un sitio optimizado para dispositivos móviles?
- ¿Cuál es la mejor manera de configurar un sitio web móvil?
Puede hacer la detección básica en javascript puro, pero tenga en cuenta que no todos los dispositivos móviles tienen un buen soporte de javascript, por lo que esto funciona mejor cuando solo busca apuntar a teléfonos inteligentes modernos como iPhone, teléfonos Webkit Blackberry, HTC / Motorola Droid y no debe preocuparse por el tipo de experiencia que se tendrá en los teléfonos Blackberry, Windows, Nokia, etc., más antiguos. Este método del lado del cliente también tiene la desventaja (y también algunos de los métodos del servidor a continuación) de que su script solo conoce los dispositivos actuales en el mercado, por lo que en algún momento en el futuro su script quedará desactualizado y necesitará una cierta cantidad de mantenimiento manual para asegurarse de que está detectando dispositivos más nuevos.
- http://www.hand-interactive.com/…
- http: //localstreamer.posterous.c…
Si solo le preocupa la detección, y no tanto la redirección, puede confiar en las consultas de medios CSS para entregar diferentes hojas de estilo dependiendo del dispositivo según lo determine su tamaño de pantalla.
Por ejemplo, esta consulta de medios apuntaría a una hoja de estilo llamada ‘iphone.css’ en iphones, ipod touch y la mayoría de los teléfonos Android de tamaño normal:
Y este apuntaría a ipads y otras tabletas de tamaño similar:
Puede leer más sobre las consultas de los medios y lo que llamamos ‘Diseño web receptivo’ en Una lista aparte . Tenga en cuenta que esta estrategia significa que sus hojas de estilo cambian, pero su marcado no lo hace, por lo que es una buena idea pensar realmente en “dispositivos móviles primero” y diseñar su HTML de tal manera que pueda organizarse fácilmente en diferentes formatos, por ejemplo, 3 el diseño de escritorio de la columna se reduce a 1 columna para dispositivos móviles al ocultar ciertos divs. Una posible gran desventaja de usar esta técnica es que su sitio de escritorio puede tener archivos javascript grandes, anuncios, contenido basado en flash, imágenes grandes y otros medios que pueden hacer que su sitio móvil demore en cargar o en responder, no lo olvide. que ocultar algo con CSS no significa que todavía no se recupera y carga en segundo plano como una solicitud HTTP.
Lado del servidor
La detección del lado del servidor generalmente es más confiable y le brinda más opciones, especialmente si tiene un sitio que está construido utilizando algo como MVC con una separación clara de lógica y vistas / presentación. Puede combinar una de las estrategias a continuación con consultas de medios CSS como se detalla anteriormente. Eso a menudo te dará lo mejor de ambos mundos.
Detección de UA simple y redirección en PHP: http://mobiforge.com/developing/…
WURFL un ‘Depósito de descripción de dispositivos’ es una forma de detectar dispositivos móviles en función de sus capacidades, como el tamaño de la pantalla, el soporte de JavaScript, el soporte de video, etc. Esta es otra capa además de la detección básica, lo que permite estrategias más granulares, como la entrega de mayor calidad imágenes o videos a los dispositivos que pueden manejarlo, y resguardar los medios de baja calidad a otros teléfonos. Todo depende de lo granular que necesites ser.
http://wurfl.sourceforge.net/
Tera WURFL: igual que el anterior pero combinado con el almacenamiento en caché de la base de datos, por lo que no está poniendo una carga pesada en el cliente por cada solicitud.
http://dbapi.scientiamobile.com/…
Device Atlas: un servicio de nivel más empresarial para detectar capacidades móviles
http://deviceatlas.com/
51Degrees es una buena clase de detección de dispositivos escrita para .NET:
http://51degrees.codeplex.com/
Combina 51 grados en un marco MVC:
http://blog.stevensanderson.com/…
Device Atlas tiene un buen artículo que compara todas las diferentes estrategias de adaptación: http://deviceatlas.com/node/2893845
