Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Una manera ligera y responsive de poner una imagen de fondo a pantalla completa en una web

Pequeño snippet de CSS para conseguir una web con una imagen de fondo a pantalla completa. La solución funciona en todo tipo de dispositivos, escritorio y móviles.

html, body { overflow: hidden; height: 100%;}
body {margin: 0; padding: 0; background: #ffffff url("bg.png") repeat-x 50% 50% / contain;}

El último parámetro de background, / contain, es background-size y define cómo se comporta la imagen en diferentes proporciones de pantalla. Dos valores interesantes son contain y cover.

Función JavaScript para detectar si una página web está siendo visitada desde un dispositivo móvil

Imago voragine.net
[actualizado el ] • Por Enlace permanente

Buceando en el código del theme Hero de WordPress, desarrollado por ThemeTrust he encontrado una función JavaScript muy sencillita para detectar si una página web está siendo visitada desde un dispositivo móvil.

No es completa, pero sí cubre los principales dispositivos móviles:

function isMobile(){
    return (
        (navigator.userAgent.match(/Android/i)) ||
        (navigator.userAgent.match(/webOS/i)) ||
        (navigator.userAgent.match(/iPhone/i)) ||
        (navigator.userAgent.match(/iPod/i)) ||
        (navigator.userAgent.match(/iPad/i)) ||
        (navigator.userAgent.match(/BlackBerry/i))
    );
}