Construí una página web con una función Parallax. Usé javascript para deshabilitar la parte de texto en pantallas pequeñas, pero no hay imagen. Quiero usar JavaScritp para cambiar la imagen más grande (1500 píxeles) por una más pequeña (500 px). Copié la clase en llamada a casa, cambié el nombre a casa móvil y agregué la imagen más pequeña. Aquí está el código javascript:
/* disable paralax scrolling */ var ismobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) if (ismobile){ // bypass parallax effect background() } //change background pictures function background () { var background1 = document.getElementById("home"); background1.target.classlist("mobilehome")};No funciona, ¿algún consejo?
En este tema sugieren usar métodos para averiguar el tamaño del dispositivo.
Obtenga el ancho del dispositivo en javascript
Parece que podría usar document.documentElement.clientWidth y luego usar el valor devuelto para decidir si desea cambiar el fondo que se muestra.
Entonces, básicamente, necesita un detector de eventos que devolverá la llamada a una función que manejará el cambio de bg según el innerWidth de la ventana.
window.addEventListener('resize', () => { if(window.innerWidth <= 500){ // change bg to a smaller one } else{ // change bg to a bigger one } })Si ejecuta el siguiente código como una página completa y cambia su tamaño, verá cómo el ancho de la pantalla se actualiza cada vez.
window.addEventListener('resize', () => { console.log(window.innerWidth) })