[SOLUCIONADO] Problema responsive en smartphones.

mmiiqquueell · #1 (**permalink**) 17/06/2015, 13:09

Buenas.

Tengo un problema y quisera salir de dudas. Un Smartphone (cualquiera) una vez carga una pagina web puede ejecutar media query?.

Es que tengo una web pero o me carga el media query directamente o no me lo carga y aunque ponga horizontal o vertical no se pone o quita el media query (dentro de un limite de resolucion para que cambie logicamente) en los emuladores de firefox y Chrome funciona perfecto pero en los smartphone nada de nada. La profesora y yo nos estamos volviendo locos buscando que puede ser pero es que hasta con un HTML con un simple DIV tampoco funciona. Parece que los Smartphone escalan la pagina pero igualmente mi pagina solo activa el media query cuando la resolucion es inferior a 670px y los smartphone superan esos 670 de sobra, por ejemplo el mio es de 960px y los compañeros tienen de 1280 a 1920px en sus smartphones y no se porque se ejecuta el media query. Por supuesto he buscado que algunos smartphone emulan una resolucion inferior a la que tienen para el responsive pero mi smartphone no hace eso, lo he probado y mantiene la resolucion de 960x540px todo el tiempo y si lo pongo vertical simplemente escala la pantalla manteniendo esos 960px de ancho.

Alguien que sepa del tema puede darme una explicacion de porque ocurre esto?

Gracias de antemano.

herzbazi · #2 (**permalink**) 17/06/2015, 14:08

pone el codigo

mmiiqquueell · #3 (**permalink**) 18/06/2015, 01:05

Claro, ejemplo: Aqui esto muy simple el codigo y no pilla media query.

Cita:

<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
<div id="prueba1"></div>
</body>

<style>
#prueba1 {width: 950px; height: 530px; background-color: #FF0;}

@media only screen and (max-width: 600px) and (orientation: portrait) {

#prueba1 {width: 450px; height: 250px; background-color: #0FF;}
}

</style>
</html>

El navegador no da problema, el smartphone no lo pilla.

herzbazi · #4 (**permalink**) 18/06/2015, 14:55

mira esto

cuando esta vertical es azul
cuando esta horizontal es rojo
y en la computadora es amarillo

Código CSS:

Ver original#prueba1 {width: 100%; height: 250px; background-color: yellow;}
 
/* Smartphones (landscape) ----------- */
@media only screen and  (max-width: 550px) { 
#prueba1 {width: 100%; height: 250px; background-color: red;}
}
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) { 
#prueba1 {width: 100%; height: 250px; background-color: blue;}
}

en el link de abajo podes ver el resultado desde tu movil (vertical y horizontal) tambien en la computadora
www.computacioncomercial.com/forosdelweb/prueba.php

lee esto!!!

http://www.eresseasolutions.com/arti...para-todo-uso/

http://ksesocss.blogspot.com/2012/04...ries-para.html

mmiiqquueell · #5 (**permalink**) 20/06/2015, 03:10

Gracias herzbazi. Ya encontré lo que tenia, lo estoy poniendo bien, es el Smartphone. Después de hacer pruebas no lograba nada y sin entenderlo pero ayer con un amigo probé otras cosas y encontré que el smartphone dependiendo de cuanto cargada este la pagina hace el escalado o el media query, en la prueba como es solo un div sin texto escalaba la pantalla (manteniendo los 960x540px "100%") pero en el caso de mi pagina como hay textos pequeños directamente activa el media query emulando una resolución de 480x270px (como la PSP o mejor dicho 50%).

Al final tendre que comprar todos los smartphones para ajustar un media query para cada smartphone xD Y si ya sabia de esas paginas :P pero se agradece :D