¡Hola! Soy nueva en esto y espero que me podáis echar una mano porque me he liado un poco con la web que estoy haciendo. He empezado con la versión móvil, a la que añadí un poco de JavaScript para cambiar el CSS de las sections al pulsarlas: son cuatro, cada una con su foto y al pulsar aparece un texto en lugar de la foto. Para que se leyera bien, di a las cajas (a través de JS) un alto automático para que la caja se adaptara al texto y funcionó. El problema es que para ordenadores de escritorio queda fatal. También quiero cambiar el header al hacer scroll en el ordenador y creo que voy a tener el mismo problema. ¿Se pueden usar distintos archivos de JS en función de la resolución del dispositivo igual que con las hojas de estilo? ¿Qué solución me proponéis? ¡Gracias!
Respuestas
Lo más sencillo en tu caso sería comprobar la anchura de la ventana del navegador y aplicar el estilo solo cuando sea menos ancha que un determinado nivel. Algo así:
var anchura = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if (anchura <= 480) { // estás en un móvil en vertical } else { // móvil en horizontal, tablet o desktop }
La pega es que la anchura del navegador puede cambiar dinámicamente, por lo que tienes que hacer que tu aplicación esté atenta al redimensionamiento de la ventana. Algo así:
window.onresize = function(event) { // ... }
En cualquier caso, si el código JavaScript solamente cambia algunos estilos, lo mejor sería que te olvides de JavaScript y utilices directamente los media queries de CSS. Algo así:
/* aquí defines los estilos para el móvil */ .elemento { display: inline-block; ... } /* aquí cambias lo que haga falta para los tablets */ @media (min-width: 768px) { .elemento { display: block; } } /* aquí cambias lo que haga falta para los desktops */ @media (min-width: 1024px) { ... }
@javiereguiluz
Muchas gracias por tu rápida respuesta, Javier. Me ha funcionado a la primera, aunque no he podido probarlo hasta hoy. Es cierto que lo más fácil sería olvidarme de JavaScript pero necesito cambiar el estilo de algunos elementos cuando hago hover en otros y solo con los CSS no sabía cómo hacerlo. Una última pregunta, entiendo que el var anchura =... debo ponerlo dentro del window.onresize = function(event) {..}, ¿no?
@mpgoberna
Si que lo puedes poner dentro de onresize pero seguramente querrás ejecutar la misma función al cargar la página y al redimensionar la ventana del navegador. Así que puedes hacer algo como:
window.onload = function () { // aquí más código si es necesario... actualizarEstilos(); }; window.onresize = function () { // aquí más código si es necesario... actualizarEstilos(); }; function actualizarEstilos() { var anchura = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if (anchura <= 480) { // estás en un móvil en vertical } else { // móvil en horizontal, tablet o desktop } }
@javiereguiluz
¡Genial, muchísimas gracias! Me has ayudado un montón :)
@mpgoberna