Los media queries no funcionan con los valores definidos

[Drakaris]

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

Código [Seleccionar] Expandir


@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 [Seleccionar] Expandir


$(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 [Seleccionar] Expandir


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


Código [Seleccionar] Expandir


$(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.

[karmany]

Hola.
Es difícil responderte si no vemos el código. Si tienes la web online y quieres pasarnos el link para que lo nosotros lo comprobemos porque el código que escribes debería funcionar. La mejor forma es que inspecciones el código, por ejemplo, desde Firefox y observes en vista responsive si el código actúa o no.

También te puede servir de ayuda validar tu archivo CSS, un simple punto y coma puede hacer que tu estilo no se ejecute correctamente... https://jigsaw.w3.org/css-validator/

Un saludo