Las media queries para dispositivos portátiles

TibicenasDesign · #1 (**permalink**) 12/11/2014, 05:56

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

TibicenasDesign · #2 (**permalink**) 12/11/2014, 06:13

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-

TibicenasDesign · #3 (**permalink**) 12/11/2014, 06:36

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" />

juangemelo01 · #4 (**permalink**) 12/11/2014, 14:13

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

TibicenasDesign · #5 (**permalink**) 12/11/2014, 14:53

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

juangemelo01 · #6 (**permalink**) 12/11/2014, 15:08

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