No me funciona el responsive designed que hago mal?

[minombreesmm]

veran basandome en esta pagina http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CSS3media Regla

Ejemplo
Cambiar el color de fondo si el visor es de 480 píxeles de ancho o más ancho:

Código CSS:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
 

aplico eso en mi código pero no funciona.

mi coligo es este:

Código CSS:

@media screen and (min-width:640px){
 
#cuadros{
        width:300px;
}
.hiddencon {
    display:none;
}
 
.menu-up {
    display: inline-block;
    margin-top: 5px;
    height: 35px;
    width: 640px;
}
}
 

con un javascript saco la resolucion de pantalla de mi celular y me regresa que tengo 640x360 pixeles.. entonces hago la condicion media con 640px y no funciona, no entra a la condicion, no ejecuta las instrucciones css, pero sin embargo hace rato puse una condicion diferente

Código CSS:

@media screen and (max-width:1000px){
 

y funcionó, si le piona 999px no funcionaba entonces deduje que era sumando el ancho mas el alto 640+360px = 1000px
pero de pronto cale con otras formas hasta que regrese otra vez a la misma pero dejó de funcionar, y ahora en vez de poner 1000px en la condicion, solo funcionaba con 979px.
esta raro.

las pruebas las estoy haciendo en mi celular por que las herramientas de los navegadores me dan resultados diferentes y no muy precisos a los que según me deberían dar en un celular.

si lo que dice la pagina de arriba es correcto no debería tener ningún problema.
pero por que ocurre esto con mi código?
se las mande a unos amigos y es el mismo problema.

uso google chrome en el celular

actualizacion..
Tambien cale con opera mini pero el javascript me da otra altura y otro width

mi javascript es este

Código Javascript:

<script language="JavaScript" type="text/javascript">
        
        <!--
        //This script was found at the JavaScript Place. http://www.javaplace.co.uk
        var height=0; var width=0;
        if (self.screen) {     // for NN4 and IE4
            width = screen.width;
            height = screen.height
            document.writeln('width '+ width+' altura '+height);
            }
        else
        if (self.java) {   // for NN3 with enabled Java
            var jkit = java.awt.Toolkit.getDefaultToolkit();
            var scrsize = jkit.getScreenSize();
            width = scrsize.width;
            height = scrsize.height; 
            document.writeln('java width '+ width+' altura '+height);
        
            
        }   
        else {
        document.writeln('Tu Resolucion de Pantalla no puede ser determinada')
        
        }
        
        //-->
    </script>
 

añadi esta linea en los metas

Código HTML:

<meta name="viewport" content="width=device-width, initial-scale=1">
 

ambos navegadores me muestran resultados diferentes en las mediasquerys
de antemano gracias

[AngelKrak]

si funciona bien todo amigo ._. cual es tu problema que tienes tu?

el background cambia cuando la pantalla es mayor a 480px ;)
http://codepen.io/AngelKrak/pen/jbBEjP

[minombreesmm]

Iniciado por AngelKrak

si funciona bien todo amigo ._. cual es tu problema que tienes tu?

el background cambia cuando la pantalla es mayor a 480px ;)
http://codepen.io/AngelKrak/pen/jbBEjP

pues el problema que tengo sucede en mi celular, en la pagina versión escritorio si funciona bien, el problema también sucede al ver el responsivo con las herramientas del navegador. y lo raro es que a veces funciona de una manera y a veces no aunque regrese los valores que estaban antes.. y borro la cache del navegador y todo y lo peor del caso es que en otros navegadores toma las mediaquerys diferentes
esta raro

[AngelKrak]

si pero cual es tu problema, no entiendo -_-? puedes mandar una captura de tu error? especificarte mejor sobre lo k kieres?

[dieseb]

Iniciado por minombreesmm

pues el problema que tengo sucede en mi celular, en la pagina versión escritorio si funciona bien, el problema también sucede al ver el responsivo con las herramientas del navegador. y lo raro es que a veces funciona de una manera y a veces no aunque regrese los valores que estaban antes.. y borro la cache del navegador y todo y lo peor del caso es que en otros navegadores toma las mediaquerys diferentes
esta raro

ctrl shift + r para que se recargue tu pagina todo brother o borra tu cache.

saludos.

[minombreesmm]

pues a eso me refiero a que los celulares no responden al responsive designed, no entran a la condicion..
el javascript me regresa el tamaño de pantalla del celular y es la condicion que pongo en el mediaquery pero parece que no la toma en cuenta..
habra alguna manera de imprimir el valor que esta detectando el mediaquery?
osea que width esta detectando el mediaquery? con javascript o algo?

[AngelKrak]

amigo, te detectara el ultimo jquery que pongas, recuerda ;)

entre este:

Código CSS:

@media screen and (min-width: 480px) {
 

y este:

Código CSS:

@media screen and (min-width:640px){
 

te va a detectar el ultimo siempre ya que son Estilos en Cascada ;)

[minombreesmm]

Iniciado por AngelKrak

amigo, te detectara el ultimo jquery que pongas, recuerda ;)

entre este:

Código CSS:

@media screen and (min-width: 480px) {
 

y este:

Código CSS:

@media screen and (min-width:640px){
 

te va a detectar el ultimo siempre ya que son Estilos en Cascada ;)

ah jejjes muchas gracias.
solo que solo estoy usando el de abajo(640px) y el que esta por default
osea tengo linkeado el css normal y abajo linkeo el del movil para que se sobreescriba.
realmente a como me arroja los datos de resolucion el javascript pienso que es por eso mismo..
chrome me manda una resolucion y opera me manda otra.
y nose si el @media detecte otra y por eso no entre a la condicion.