[SOLUCIONADO] ¿Porque en un window.matchMedia() me funciona y en el otro no?

[Drakaris]

Hola, tengo una duda:
Estoy haciendo una web, y tengo un calendario php-mysql y lo estoy haciendo responsive por la cual yo  quisiera que dónde pone:Lunes,Martes,Miércoles,Jueves... En versión para tablets y moviles quisiera que se ponga reducido (L,M,X,J,V,S,D), para eso puse este código:

Código [Seleccionar] Expandir


   <script>
     $(document).ready(function(){
       if (window.matchMedia("(max-width:768px)").matches){
         week1 = document.getElementById("dia1");
         week1.innerHTML = "D";
         week2 = document.getElementById("dia2");
         week2.innerHTML = "L";
         week3 = document.getElementById("dia3");
         week3.innerHTML = "M";
         week4 = document.getElementById("dia4");
         week4.innerHTML = "X";
         week5 = document.getElementById("dia5");
         week5.innerHTML = "J";
         week6 = document.getElementById("dia6");
         week6.innerHTML = "V";
         week7 = document.getElementById("dia7");
         week7.innerHTML = "S";          
       }
</script>

Cuyo código es para tablet y en teoría para móvil, pero funciona solamente para tablet en el móvil no me funciona, no se porque, probé de de poner doble función [window.matchMedia()], pero no funciona, y con css.

Código [Seleccionar] Expandir


<style>
 @media screen an (max-width:600px){
  #dia1{
    content: "D";
  }
  #dia2{
    content: "L";
  }
  #dia3{
    content: "M";
  }
   .
   .
   .
}
</style>

Pero, tampoco funciona...
Que esta pasando?

Se puede poner la funcion

Código [Seleccionar] Expandir

widow.matchMedia("") con dos valores?
ej:

Código [Seleccionar] Expandir


$(document).ready(function(){
   if(window.matchMedia("(max-width:768px) and (max-width:600px)").matches){...}
});

o

Código [Seleccionar] Expandir


$(document).ready(function(){
   if((window.matchMedia("(max-width:768px)").matches) || (window.matchMedia("(max-width:600px)").matches) = true){...}
});


Gracias de antemano.