soy Kseso y esto EsCSS

Condicional de Blogger para detectar dispositivos móviles sin habilitar su plantilla

Un condicional efectivo de Blogger para detectar el acceso al blog desde dispositivos móviles con el que no es necesario tener que habilitar "la plantilla de móvil"

Condicional de Blogger para detectar dispositivos móviles sin habilitar su plantilla

·Por Kseso ✎ 13
Blogger: detectar acceso de dispositivos móviles sin habilitar su plantilla

Una de mis mayores preocupaciones con el blog ha sido y sigue siendo el evitar la carga innecesaria de cualquier elemento. Fruto de esta inquietud fue cierto experimento que compartí en el artículo Optimización extrema de un blog en Blogger.

Sin embargo había, hasta hoy, un detalle imposible: cómo discriminar si se accede al blog desde un dispositivo móvil y en base a ello actuar. Como, por ejemplo, para no cargar cierto contenido u ofrecer otro específico.

Si bien es cierto que son conocidas muchas "condiciones" y etiquetas de Blogger para ello, como data:blog.isMobile, todas tienen una condición previa para funcionar: es obligatorio tener habilitada la plantilla para móvil.

Si no la habilitas ninguna funciona.

Tampoco sirve de nada intentar aprovechar que Blogger redirecciona el acceso móvil a la url http://dominio.blogspot.com/?m=1. Como ves añade a la dirección de cada blog el parámetro ?m=1. Pues usando una condición por tipo de url tampoco conseguí resultados:

<b:if cond='data:blog.url != "http://ksesocss.blogspot.com/?m=1"'>

Frustrante. Todo lo anterior era una espina que tenía clavada. Y mira que había buscado, preguntado y experimentado. Hasta hoy.

isMobileRequest

Aunque la detección por url no sirva, sí que es posible usar dicho añadido para nuestro propósito sin tener que activar la plantilla móvil.

En uno de tantos script usados por Blogger hay uno que evalúa una serie de valores. Algunos son los que el autor define en el apartado "configuración". Como si es un blog privado o el tipo de contenido.

Algunas de estas evaluaciones pueden devolver dos valores: true o false.

isMobileRequest en blogger

La condición que nos interesa es isMobileRequest. Básicamente lo que hace es evaluar la dirección del blog y si encuentra en ella la cadena m=1 devuelve 'true' y si no la encuentra o es m=0 devuelve 'false'.

Así que todo lo que tenemos que hacer es usar un condicional basado en esta evaluación y el resultado devuelto:

<b:if cond='data:blog.isMobileRequest == "true"'> contenido para móviles <b:else/> contenido para no móviles </b:if>

O si lo que queremos es no cargar contenido en dispositivos móviles:

<b:if cond='data:blog.isMobileRequest != "true"'> </b:if> equivalente a la anterior <b:if cond='data:blog.isMobileRequest == "false"'> </b:if>

Como es lógico, la condición con este dato o etiqueta blog.isMobileRequest puede ser evaluado con cualquiera de los operadores permitidos por Blogger.

Cuándo añade Blogger ?m=1 a la url

Tras publicar el post, hay quienes me han preguntado por cuándo o en cuáles dispositivos añade Blogger la cadena ?m=1. Y lo cierto es que no lo se ni he podido encontrar información al respecto.

Despues de jugar un rato con el inspector de código de Chrome y la opción "Toggle Device Mode" en la que puedes emular dispositivos y tipo de conexión sólo tengo la sensación de que Blogger ha de avaluar más de uno y de dos datos al respecto.

Verificado su funcionamiento en este mismo blog: puedes observar que los banners en móviles no se cargan y en dispositivos de escritorio, si no la tienes bloqueada, sí. Igual con los 3 últimos comentarios y el avatar de sus autores que muestro en la parte superior derecha del index (o los que se despliegan en los artículos).

Prúebalo tú mismo http://ksesocss.blogspot.com/2015/07/condicional-Blogger-isMobileRequest.html?m=1 Como ves este enlace a este mismo artículo lleva la cadena /?m=1 en su url. Pínchalo y observa los cambios.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso