18041 sujets

Questions générales et questions de débutants

Responsive - Forcer la resolution du mobile

Bonjour,

Désolé si la réponse a déjà été posée, mais j'ai pas pu trouver mon bonheur avec Google...

Voilà j'aimerais améliorer mes compétences en matière de reponsive design, jusqu'à présent j'utilisais du javascript mais j'ai décidé de me mettre en MediaQueries pour faire plus light et plus sérieux.

J'ai fait un site "test" disponible ici -> http://bricodecoloisirs.com/
Le système fonctionne bien avec le print, les écrans large et écrans standard.

Le problème est que mon Sony Xperia SP a une résolution de 1280 x 720 pixels, du coup le système le détecte comme un écran standard.Hors j'aimerais que ce soit la mise en page prévue pour les mobiles qui s'affiche.

Comment est ce que je peux procéder pour "forcer" la résolution des mobiles HD à 600px maximum ??

Je pensais avoir trouver mon bonheur avec la balise meta "viewport" mais ça ne le fait pas...

Merci d'avance pour vos réponses et bonne journée !!
Administrateur
Bonjour,

Il y a plusieurs problèmes dans ta page et dans ton appel de feuille de styles mobiles :
<link rel="stylesheet" media="handheld and (max-width: 600px)" href="mobile.css" type="text/css" />


Pour commencer, tu exiges une double condition : "handheld" et "autre chose". Du coup c'est déjà rapé puisque plus aucun terminal mobile (à l'exception d'Opera Mini) ne reconnaît le media handheld.

Ensuite, si tu souhaites vraiment ne cibler que les mobiles et non les écrans de bureau avec cet appel, il serait plus judicieux de cibler "device-width" et non "width".

Je ne connais pas le device-width du Xperia SP, je ne trouve pas l'info sur le Web, mais c'est très certainement inférieur ou égal à 640px, donc je te propose plutôt cette syntaxe :

<link rel="stylesheet" media="screen and (max-device-width: 640px)" href="mobile.css" type="text/css" />


Note : je te conseille vivement la lecture attentive des deux ressources suivantes :
- http://www.alsacreations.com/article/lire/930-css3-media-queries.html
- http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
Merci Raphael !

J'ai remplacé "handheld" par "screen" et ça fonctionne, 600px me parait être une bonne valeur standard pour les mobiles donc je vais mettre ça... par contre je n'ai pas l’occasion de tester sur un appareil Apple et un Microsoft... est ce que quelqu'un pourrait me dire si ça fonctionne aussi bien ??

Merci d'avance pour le service !
Sujet clos
Aller à