Adapter site aux résolutions supérieures ?

Bonjour,


J'espère que ma question est au bon endroit, vu qu'il semblerait que cette section "responsive" du forum est avant tout orientée vers les supports mobiles... Désolé si ce n'est pas le cas.

Voilà mon problème : j'ai travaillé mon site sur mon écran 24", et en l'adaptant pour des résolutions inférieures (jusqu'à 1024*768, si j'ai bien fait mon travail ). Mais dernièrement, j'ai constaté qu'à des résolutions d'écrans dites hautes (supérieures ou égales à 1920*1200px), ma page d'article seul se retrouvait un peu "tassée" en haut de fenêtre...

J'ai eu beau chercher, je n'ai trouvé aucun moyen de simuler ces hautes résolutions chez moi, pour adapter ensuite mon design par rapport à ça (en recentrant certains contenus, par exemple).

Quelqu'un aurait-il une solution, ou une idée, qui me permettrait de résoudre ce problème ?

Merci d'avance !

Salut,

À défaut d'acheter des écrans géants, rien ne t'empêche que fixer une largeur maximale au conteneur global, grâce à max-width. Pas même besoin de créer une media query pour ça.

Bonjour Victor !


Merci pour ta réponse. Le problème en ce qui me concerne (mais je n'étais peut-être pas très clair) ne concerne pas la largeur, qui effectivement en soi n'est pas forcément un problème majeur, mais bien la hauteur.

En effet, sur cette page par exemple, on peut constater, en 24" et inférieurs, que le contenu se cale relativement bien dans la hauteur (et dans la largeur)... Mais ce n'est pas du tout le cas dans des résolutions supérieures, où le contenu se retrouve "tassé" dans la moitié supérieure de l'écran.

D'où ma demande, pour savoir s'il était possible de simuler des hautes résolutions sur mon ordinateur, pour pouvoir vérifier le comportement de mon site à ces "hautes" résolutions...

j'ai un ecran en 1900X1200 et un en 1024X768 en permanence sur mon pc.
Dans FF avec le raccourcis + [-] (zoom -), le résultat dans le petit écran te donne un résultat similaire avec un gabarit. Il te suffit de finaliser en redimensionnant ta fenêtre.

Pour le gabarit de réglage, tu peut injecter temporairement dans ta feuille de style ce CSS:

html:after {content:'';width:1900px;display:block;border-top:solid 20px;height:1260px;} 

et caler ta fenêtre sans scroll sur la bande noire en la positionnant en bas.

ATTENTION, tes mediaquerie feront fis du zoom, alors a mettre en commentaires pour le test visuel .
Cdt,
GC

ci-joint une copie de mes ecrans (print screen) : chrome dans le grand et Firefox dans le petit


petite différence sur la taille des polices du à la différence des navigateurs.
Modifié par gc-nomade (04 Apr 2013 - 22:27)