Discussion :

[Soundboy39]

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 !!

[grafimages]

Pourquoi vouloir forcer la résolution ? En mode paysage, c'est bien la version Web qui s'affiche (normal) et en mode portrait, ça devrait switcher en 640 pixels, non ?
Ou alors je n'ai pas compris la question ?

[Muchos]

N'est-ce pas dû, pour le mobile, à la déclaration de viewport dans la css qui ne correspond pas à celle du html?
Viewport html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Viewport css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

@viewport { width: 600px; zoom: 1; }

PS: Personnellement, j'aurais mis ces déclarations dans un seul fichier CSS.
PPS: J'avoue ne pas saisir la différence entre @media et @viewport.

[Soundboy39]

Merci pour vos réponses et désolé pour le retour tardif.

Je viens poster la solution au problème, en fait elle venait de l'appel de ma feuille style pour les tailles inférieurs ou égales à 600px.

Voici la balise corrigée :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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