Page web & résolution d'écran

[Gouketsu]

Bonjour,

J'aimerai partager avec vous ma difficulté du jour :

J'ai développé un site, avec une largeur de 1200px. Je l'adapte aux plateformes mobiles avec un viewport ( <meta name="viewport" content="width=1220"> )

Seulement je n'avais pas prévu un truc, le cas des ordinateurs avec des résolutions plus basses ( 1024 par 768 par exemple) ... Le viewport ne fonctionne pas pour eux, du coup je ne sais pas comment faire pour que la page s'adapte (je n'ai pas envie de refaire tout le site...)

Any idea?

[snoopy1492]

Malheureusement si tu as codé ton site avec des largeurs en dur et que l'ensemble fait 1200px, il n'y a pas grand chose à faire...

La question est, les éléments de ton site ont-ils aussi une largeur fixe? Si tu mets ton site avec une largeur de 100% il se passe quoi?

En dernier recours il y a les propriété css zoom ou transform:scale qui peuvent réduire l'ensemble de l'affichage mais c'est assez moche comme utilisation.

A mettre en place avec une detection de la surface d'affichage disponible pour que seuls ceux ayant moins de 1200px dispo soient affectés avec un calcul du ratio de zoom a appliquer...

bref c'est assez moche mais ça devrait fonctionner.

Ou sinon barbare un overflow:hidden, comme ca y a plus d'ascenseur, mais la personne ne verra pas ce qu'il y a à droite en dehors de l'écran

[Gouketsu]

Comment fonctionnent css zoom et transform:scale? Tu parles de calculer un ratio de zoom... tu peux expliquer? Merci

[maximeK]

Salut Gouketsu,

Helas ca ne marcheras pas les css zoom et autre tricks CSS :

Le problème avec les gens en 1024px c'est que la plupart utilise IE8 voir IE7 et que ces tricks CSS ne marches pas.Après tu peux les ignorer et laisser ton site tels quel.

Pour infos encore aujourdui la safe zone est entre 960 et 990 pixels ( a utiliser avec une grid et la tu est au top of the pop )

Pour checker les infos attrayant au usage sur l'internet : http://gs.statcounter.com/#resolution-FR-monthly-201203-201303

Après je doutes très sincèrement qu'avec une largeur en "dur" tu puises adapter ton site en mobile :)

Mais bon peux etre que l'ont peux t'aider

[Mathaxx]

Bonjour,

Sinon il reste toujours la technique du javascript, qui te permettrait de fonctionner à travers tous les navigateurs et de redimensionner à la volée pour les gens qui ont une résolution inférieur aux 1200px nécessaire.

J'avais du le faire une fois et ça s'était terminé avec un truc un peu lourd mais du genre :

- Calcul du ratio entre 1200px et la résolution cliente

- Boucle sur tous les elements du site

- modification de la taille grâce au ratio

C'est pas très long à faire, mais ça ralentit pas mal le site :)