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.
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)) );} |