Control de Redirección Htaccess para versión Web Móvil
En ocasiones algunos clientes nos pueden encargar una versión móvil para su sitio, y que trabaje de forma paralela a la versión de escritorio. Lo más adecuado sería crear una misma hoja de estilo con un diseño responsive y adaptativo, pero a veces por diversos motivos puede ser que el cliente no quiera rediseñar la web, y prefiera optar por este tipo de «solución»: Redirección Htaccess para versión Web Móvil .
Pasos a seguir:
-
Crear subdominio
Lo primero debería ser crear un espacio donde poder enviar las peticiones web que provengan de móviles y tablets, lo más lógico quizás sería crear un subdominio o un directorio en la raiz del dominio padre.
-
Redireccionar las peticiones web con .htaccess
El segundo paso que deberíamos hacer es redireccionar las peticiones web que provengan de dispositivos móviles al subdominio. Una manera de hacerlo de las muchas que hay sería a través del fichero .htaccess .
RewriteEngine On RewriteBase / RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino [NC] RewriteRule ^$ http://subdomain.domain.com/ [R,L] -
Publicación de la versión móvil
Una vez tengamos separadas las peticiones web que provienen de dispositivos smartphone y tablet…podemos dedicarnos a crear un diseño específico que a su vez pueda ser adaptativo entre los diferentes modelos y tamaños de pantalla.
Otra versión en htaccess que redirecciona en función del navegador web es la que he observado en la aplicación: http://detectmobilebrowsers.com
En esta herramienta podemos ver diferentes manera de redireccionar en función del navegador web del dispositivo móvil, y se puede hacer en muchos lenguajes, tipo python, perl, JSP, Javascript, php…etc.
Aunque lo más eficiente quizás sea crear un diseño responsive desde la versión de escritorio, también existen otras alternativas para las diferentes ofertas y demandas que nos puedan surgir en nuestros proyectos, siendo una solución aceptable la de redireccionar los diferentes dispositivos, aunque no termina de ser del todo fiable y alguno se pueda escapar por la vía que no debe.
Espero que este artículo os sirva de ayuda,
Un saludo,
Óscar / Devservice.es
Por Óscar Carrillo
Solicitar presupuesto
Manuel says:
Hola,
Me gustaría saber si conoces alguna forma para que No redireccione a la versión móvil si detecta Ipads o Tablets, es decir que solo redireccione si detecta móviles.
Muchas Gracias.
admin says:
Hola Manuel, en el código fuente del .htaccess de este post los ipad no son redireccionados…para ello habría que agregar al fichero estas lineas:
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^$ http://subdominio/dominiopadre.com [R,L]
Para las otras tablets la verdad no lo se pq yo tengo un ipad y no lo he podido probar con otros, desconozco si entran en el grupo de «android» y «windows» que ves en las líneas del fichero.
Desde luego lo más profesional es hacer una web responsive que se adapte según el tamaño del ancho de la pantalla y no por la marca del dispositivo como hacemos aquí, pq si mañana sale una marca nueva llamada «pepito» y no usa ninguna condición de las que hacemos aquí como: android, windows phone…etc se nos puede colar y no entrar en la redirección, aunque a nuestro favor te puedo decir: habrá pocos dispositivos que no sean de estas marcas y sistemas operativos, por lo que el porcentaje de acierto de este código es bastante elevado (aunque no es 100%)
Manuel says:
Hola Oscar,
Gracias por todos los detalles.
Comparto la opinión del realizar el diseño responsive, el motivo es unicamente para unas webs específicas de imágenes algo grandes que me interesan que se mantengan en el mismo tamaño (grande y no se adapten), y diseñar otras especificas para móvil, a 320 px. aprox. por ello de que en la Tablet se viera la versión PC.
Había pensado que quizás podría funcionar redirigir en función del tamaño de px del dispositivo a través de media query.
Si no fuera posible lo haría adaptable.
De cualquier forma, muchas gracias por todo.
Saludos
Angel says:
Buenas noches Oscar, buen articulo, corto y conciso, veo que detectas por el user agent para redirecionar a la web móvil.
Quería saber si se puede detectar pero por el ancho en pixels de la pantalla del dispositivo, ya que mi versión móvil (web móvil paralela en sub-dominio) esta hecho en 740px de ancho y solo va mostrarse en móviles que tengan ese ancho a menos, de esta forma evitar actualizar el dispositivo cada vez que salga uno.
Es posible y correcto hacerlo asi en temas de rendimiento y tiempo al hacer la petición, detectarlo por el ancho en pixels?
devservice_admin says:
El fichero htaccess es un archivo de configuración del servicio httpd apache, por lo que en ningún caso este servicio va a medir el tamaño de la pantalla del cliente que hizo la petición web (hasta donde mi lógica me dice, ya que el servicio se ejecuta en el servidor)
Para seccionar las peticiones web según el ancho de pantalla lo normal es hacerlo desde el fichero html o php que contiene la página web. a través de javascript (que se ejecuta del lado del cliente) puedes medir el ancho de la pantalla…de modo que: Si mides tantos px te redirecciono aquí, si mides tantos otros te redirecciono a este otro lugar…te refieres a eso?
Saludos
José Luis says:
Hola,
Tengo una web con un dominio .es que implementa media queries para navegar en versiones adaptativas ( destop, tablet, mobile ). El problema es que tengo un domnio .com redireccionado al susodicho .es y cuando entro por este camino en mobile me reproduce la versión desktop… es como si no ejecutase la querie que le toca que sería la de mobile. Agradezco infinitamente si alguien supiera decirme alguna solución.
Muchas gracias y saludos.
devservice_admin says:
Hola Jose Luis, prueba hacer una redirección 301 desde el dominio.com al .es, parece como si la redirección que tuvieras ahora activa trabajase como un iframe….más que una redirección. quizás el problema sea ese