1485 sujets

Web Mobile et responsive web design

Avis sur des médiaquerries pour tablettes et smarttphones HD

Bonjour,

Une question souvent abordée. Aussi je voudrai avoir votre avis sur les media-querries que je veux utiliser. Je suis en mobile-first.
Je n'ai pas, pour le moment tenu compte de l'Iphone 6 (414px/736px),ni de la SurfacePro 3 (768px/1366px/ratio:1).
Est-ce que le min-device-pixel-ratio:1.5 va suffire à les distinguer des mêmes résolutions que l'on pourrait trouver sur des netbook ou autres écrans?
Est-ce que pour les smartphones, le fait de rajouter max-width:6in apporterait quelque chose


/* Smartphones dans les deux orientations */
@media only screen and (min-device-width: 320px) and (max-device-width : 640px) {}
/* Smartphones orientation portrait */
@media only screen and (max-device-width: 400px) and (orientation: portrait) {}  
/* Smartphones orientation landscape */
@media only screen and (max-device-width: 640px) and (orientation: landscape) {}	
/* Tablettes dans les deux orientations */
@media only screen and (min-device-width: 600px) and (max-device-width : 1280px) and (min-device-pixel-ratio : 1.5) {}
/* Tablettes orientation portrait */
@media only screen and (max-device-width: 800px) and (orientation: portrait) and (min-device-pixel-ratio : 1.5) {}  
/* Tablette orientation paysage */
@media only screen and (max-device-width: 1280px) and (orientation: landscape) and (min-device-pixel-ratio : 1.5) {}


Cordialement
Pour les tablettes, je vais corriger avec ce code:

only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (-o-min-device-pixel-ratio: 3/2) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait),


en y ajoutant une condition min-width: 7in pour éliminer les smartphones.
Bonjour,

Ci-dessous le css pour les breakpoints que j'ai choisi.
Cela fonctionne bien pour les ordi.
Cela ne fonctionne pas pour les smartphones en mode landscape, ni pour les tablettes lanscape.
Je pense que pour les tablettes c'est parce que le mediaquerrie de l'ordinateur vient après celle de la tablette, et ayant des caractéristiques communes la supplante.

J'ai mis une page de demo:
http://dvpts.cahue.net/breakpoints/demo-breakpoints.html 


/* mobile first */
body {
	background-color: red;
}
	/* --- Smartphones (landscape) Petites tablettes (portrait) --- */
	@media only screen 
	and (min-device-width : 480px)
	and (max-device-width : 719px)
	and (orientation : landscape) {
		body { background-color: blueviolet; }  		
	}
	/** --- Tablettes (portrait) --- */
	@media only screen 
	and (min-device-width : 720px) 
	and (max-device-width : 1023px) {
		body { background-color: royalblue; }	
	}
	/* Tablettes (landscape) */
	@media  screen 
	and (min-device-width: 1024px) 
	and (max-device-width: 1366px) 
	and (orientation:landscape) 
	and (max-width: 12.5in) {
		body { background-color: orange; }     
	}
	/* Ordinateurs */
	@media  screen 
	and (min-width: 1024px) { 
		body { background-color: yellow; }     
	}
	/* Ordinateurs large écran*/
	@media  screen 
	and (min-width: 1367px) { 
		body { background-color: gray; }     
	}

Modifié par cpalo (15 Jan 2015 - 17:37)
En fait cela fonctionnait en mode landscape pour les smartphones, mais il faut que je réactualise la page.
http://dvpts.cahue.net/breakpoints/breakpoints.html
Le problème qui me reste c'est pour faire la différence entre les tablettes et les ordis pour les résolutions de 1024px à 1366px.
Peut etre en utilsant les conditions only ou not....
Mon nouveau css:

body {
			background-color: red;
		}
		@media only screen 
		and (min-device-width : 320px) 
		and (max-device-width : 479px) 
		and (orientation : portrait) {
			body { background-color: violet;}
		}
		@media only screen 
		and (min-device-width : 480px) 
		and (max-device-width : 719px) 
		and (orientation : landscape) {
			body { background-color: green;}
		}
		@media only screen 
		and (min-device-width : 720px) 
		and (max-device-width : 1023px) 
		and (orientation : landscape) {
			body { background-color: blue;}
		}
		@media  screen 
		and (min-width: 1024px) { 
			body { background-color: yellow; }     
		}		
		@media  screen 
		and (min-width: 1367px) { 
			body { background-color: gray; }     
		}
Bonjour,
Pour cibler les tablettes: 

@media  screen 	and (min-device-width: 1024px) 	and (max-device-width: 1366px) 	and (orientation:landscape)	and (max-width: 12.5in),
@media  screen 	and (min-device-width: 1024px) 	and (max-device-width: 1366px) 	and (orientation:landscape)	and (min-device-pixel-ratio: 1.5) { 
			body { background-color: orange; }     
		}
@media  screen 	and (min-width: 1024px) { 
			body { background-color: yellow; }     
		}

Le min-device-pixel-ratio:1.5 ne ciblent bien que des tablettes.
Mais un certain nombre de tablettes ont ce ratio égal à 1. Alors pour les sélectionner j'utilise la taille de l'écran en pouces. Mais dans ce cas, j'aurai un problème pour les ordinateurs avec un petit écran.
je veux bien que vous testiez et me fassiez part de vos retours.
http://dvpts.cahue.net/breakpoints/breakpoints.html[/url]
Petit défaut que j'ai toujours: sur un smartphone, lorsque je change d'orientation, il reprend le css du tout début ( body: red) et il faut que j'actualise la page pour qu'il prenne le querry se rapportant à la situation ( portrait/layout).

Cordialement
Modifié par cpalo (16 Jan 2015 - 08:59)
Sujet clos
Aller à