Mucho se ha hablado ya de los media queries en CSS para ir adaptando el estilo de la página web según el tamaño del navegador. Pero, en muchas ocasiones, usamos funciones en JavaScript que, dependiendo de la versión de web que estemos usando, deben cambiar.

Como ejemplo os pongo en situación de algo básico. Imaginemos que al hacer click en un botón debemos hacer desplazar un elemento 345 píxeles, en la versión para iPad 300px y en la de iPhone 400px. Problemón, o… no tanto, quizá.

Pongamos que al hacer click en la imagen “mover.png” ejecutamos la función moverCosa(), que mueve el elemento con id="cosa-a-mover". Tendríamos un código tal que así:

<img src="img/mover.png" onclick="moverCosa();" style="cursor: pointer;">
<div id="cosa-a-mover"><p>¿Me muevo o no me muevo?</p></div>
<script src="js/mover.js"></script>

Y en el archivo mover.js tenemos lo siguiente para la versión de escritorio:

function moverCosa () {
  document.getElementById("cosa-a-mover").style.marginLeft = "345px";
};

Pues bien, ahora deberemos introducir los “media queries” de JavaScript, que no es más que un if que recibe las medidas del navegador. Podríamos terminar nuestro ejemplo con lo siguiente:

function moverCosa () {
  if (document.documentElement.clientWidth <= 768) {
    document.getElementById("cosa-a-mover").style.margin - left = "300px";
  } // Menor o igual a 768px (Viewport de los iPad)
  if (document.documentElement.clientWidth <= 414) {
    document.getElementById("cosa-a-mover").style.margin - left = "400px";
  } // Menor o igual a 414px (Viewport de iPhone 6 Plus)
  else {
    document.getElementById("cosa-a-mover").style.margin - left = "345px";
  } // Resto de tamaños la versión de escritorio
};

De esta manera tenemos diferente código corriendo en la misma función dependiendo del tamaño del navegador con puro JavaScript.

Un saludo!!