Hola, estoy haciendo mi web responsive con media queries, y es un problema pequeño pero que no sé solucionarlo. Yo pongo:

Código :

@media screen and (max-width:768px){
 code...
}

Pero no me lo arranca bien, en este código lo que le digo es que si el ancho de mi pantalla es menor ( con max-width) de 768px me va a cambiar los estilos, eso es para tablets, también lo tengo en JS:

Código :

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

Y para móviles que si la pantalla es menor que 600px me va a cambiar los estilos y JS:

Código :

@media screen and (max-width:600px){
 code...
}

Código :

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


Esta manera no me arranca es decir que cuando yo pongo la pantalla a 768px (modo tablet) no me ejecuta los códigos (mi tablet la anchura es exacto 768px), pero si me ejecuta si la anchura es  a partir de 691px, y modo movil a partir de 540px cuando yo lo progrmé para:

movil---> 600px
tablet---> 768px

Mi tablet es un Surface Pro y no he probado otras tablets.. Hi antes me iba bien, me lo ejecutaba perfectamente.

Porque me pasó esto que error hay, y en su tablet y moviles de 600px de anchura se ven bien?

Gracias.