Foros del Web » Creando para Internet » CSS »

Las media queries para dispositivos portátiles

Estas en el tema de Las media queries para dispositivos portátiles en el foro de CSS en Foros del Web. Buenos días. Tengo ciertas dudas que no encuentro una solución lógica. Cuando nos ponemos con las webs para hacerlas responsive con MobileFirst empezamos el diseño ...
  #1 (permalink)  
Antiguo 12/11/2014, 05:56
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Las media queries para dispositivos portátiles

Buenos días.

Tengo ciertas dudas que no encuentro una solución lógica.
Cuando nos ponemos con las webs para hacerlas responsive con MobileFirst empezamos el diseño para 320 y luego vamos adaptándolo poco a poco hasta la versión desktop más grande.

En pantallas de PC o Laptop normales, con min-width todo va sobre ruedas.
Pero en smartphones y tablets tengo ciertas dudas.
Debo usar; min-width, min-device-width, o jugar con min-resolution y pixel ratio.
Dos ejemplos:
Código:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {    
/* Para iPhone 4g  */
}

/* iPhone 6*/
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
}

Ahora mismo por ejemplo tengo para testear un Sony Xperia Z1 el cual en webs como esta http://screensiz.es/phone y en la del fabricante vemos que tiene 1080x1920px pero por ejemplo si inspeccionamos una web en Chrome y usamos el Toggle Device mode vemos que mide solo 360x640px y efectivamente en el código si pongo min-width: 361px ya el Z1 no lo toma.

Supongo que tiene que ver con el pixel ratio pero la verdad tengo un lio enorme en la cabeza, y no quiero hacer la web a tiritas sino correctamente, así que si alguno me dice la manera correcta para los Smartphones y Tables se lo agradeceré enormemente.

PD: only Screen porque el Handheld ( Que entiendo que es para dispositivos portátiles) no hace ni caso, no se si es que necesita tiempo para implementarse o que entendí mal también el atributo. https://developer.mozilla.org/es/docs/CSS/Media_queries
  #2 (permalink)  
Antiguo 12/11/2014, 06:13
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Respuesta: Las media queries para dispositivos portátiles

Sigo peleando pero nada, lo que me frustra es que mi media queria no me hace caso con respecto al min-device-width, hace lo mismo que con min-width y creo que ahí es donde está mi problema, pero no entiendo porque no lo reconoce.



Y en caniuse no sale http://caniuse.com/#search=device- sino pixel-ratio y min-resolution, que hay que añadir el prefijo -webkit-
  #3 (permalink)  
Antiguo 12/11/2014, 06:36
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Respuesta: Las media queries para dispositivos portátiles

Y tengo el meta tag en el <head> por si me lo iba a decir alguien ;)
Código:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1, user-scalable=no" />
  #4 (permalink)  
Antiguo 12/11/2014, 14:13
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Las media queries para dispositivos portátiles

yo por lo general uso
Código:
@media screen and (max-width: 700px) {

	#elementos {
	 propiedades
	}
}
en tu caso, podrias ponerlo igual, con min-width, no debe haber ningun problema.
al menos en los dispositivos que los eh probado, me han funcionado bien,
seria cuestion que probaras y comentaras como te fue
  #5 (permalink)  
Antiguo 12/11/2014, 14:53
Avatar de TibicenasDesign  
Fecha de Ingreso: noviembre-2013
Ubicación: Gran Canaria
Mensajes: 58
Antigüedad: 10 años, 4 meses
Puntos: 2
Pregunta Respuesta: Las media queries para dispositivos portátiles

Hola, gracias por responder

Que va, sigo con el mismo problema, en dispositivos móviles no me reconoce los atributos

device-width
min-device-width
max-device-width
device-height
min-device-height
max-device-height


Y si pongo cualquier ancho, me lo interpreta como width normal, si ves la imagen que puse antes, no va a coincidir lógicamente. Y no entiendo porque no lo reconoce frustración el llevar toda la tarde con eso
  #6 (permalink)  
Antiguo 12/11/2014, 15:08
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años
Puntos: 17
Respuesta: Las media queries para dispositivos portátiles

hace tiempo hice esta eestructura (hace casi 2 años), seria cuestion que la checaras
http://juangemelonet.zz.mu/Esqueleto/
deberias verlo algo asi en el celular

si te sirve, con toda confianza puedes usar el codigo que necesites de la hoja de estilo

Etiquetas: queries, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:42.