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