18041 sujets

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

Taille fixe pour un site web quelquesoit la résolution de l'écran

Bonjour,

je développe actuellement un site web mais j'ai une contrainte particulière qui me pose problème, en effet, je souhaiterai qu'une zone de mon site s'affiche avec une taille fixe quelque soit la résolution de l'écran.

Je sais que ce n'est pas une bonne pratique, mais c'est tout de même ce qu'il faut que je fasse.

j'ai essayé en fixant des width et height avec des valeurs en cm, mm, in, etc...
le soucis c'est que si je modifie ma résolution et bien la taille de ma zone varie aussi, ce que je ne comprend pas c'est que cm par exemple est censé représenter les centimètres de ce fait pourquoi lorsque je change de résolution ma zone change de taille ?

Petite précision, la zone est un canvas, serait-il plus judicieux d'utiliser svg pour réaliser ce genre d'opération?

Ce que je souhaite c'est une zone (canvas ou svg peu importe) qui s'adapte de manière à faire toujours la même taille que je sois en résolution 800x600 ou 1680*1400 quitte à scroller...

J’espère avoir été clair dans ma demande Smiley smile
salut,
bin pourquoi ne pas spécifier les valeurs dans les attributs "width" et "height" de <canvas> ? Et puis si c'est fixe, autant utiliser des "px" aussi non ?
c'est ce que j'ai fais mais lorsque je change de résolution d'écran, la forme zone change également de taille et ce n'est pas le comportement que je souhaite obtenir.
Je ne suis plus sûr de ce qu'on parle. C'est le contenu du canvas ou bien il s'agit d'autre chose ?
As-tu un exemple ou un lien.
Ok alors avec un exemple:

<html>
    <head> 
        <style>          
            #container {                
                margin-top:15px;
                border-style: dashed;
                border-color: rgba(20, 126, 239, 0.50);
                width: 150px;
                height: 300px;
            }         
        </style>
    </head>
    <body>
        <center><div id="container"></div></center>
    </body>
</html>


Ce code affiche un rectangle de largeur 150px et hauteur 300px, jusque la rien de très compliqué, mon soucis c'est que je souhaiterai que sa taille "réelle" (celle que j'aurai si je mesurai avec une règle) soit toujours la même quelque soit la résolution de mon écran.

j'ai essayé avec les différentes unités de de mesures dont les cm, mm, in,etc...
mon soucis est que lorsque je change de résolution je n'obtient pas la même taille "réelle"

C'est plus clair ?
Modérateur
Malheureusement à l'heure actuelle, les unités absolues ne donnent pas des valeurs absolues sur un écran, et ne peuvent pas être utilisées de cette manière.

La seule manière connue est de demander à l'utilisateur de mesurer une valeur connue sur son écran (une largeur de A4 par exemple) avec un curseur déplaçable pour avoir une résolution (pixels/cm). Mais bon, c'est pas hyper user-friendly comme méthode.

p.s: Enfin hormis de connaître les caractéristiques de l'écran ou de les demander.
Modifié par kustolovic (19 Mar 2014 - 14:43)
Ok très bien, merci pour cette réponse Smiley smile

Une autre solution serait d'utiliser css 3 et d'appliquer une feuille de style particulière pour chaque résolution non ?
Modérateur
euh non. En CSS3 on ne peut pas connaître la résolution non plus… (Il faudrait connaître la taille en pixels et la taille physique pour cela, et on n'a pas la dernière)
oui mais en css 3 on peut détecter la résolution de l'écran, dans ce cas si je défini à la main la taille en pixel de ma zone pour chaque résolution c'est bon non ? (c'est fastidieux comme boulot mais j'ai l'impression que c'est la seule solution)
Bonjour. A la lecture des posts, je suis curieux de savoir ce que vous comptez faire avec une telle contrainte...

C'est pour une appli ?
Modifié par Olivier C (21 Mar 2014 - 13:56)
oui effectivement, une application qui a comme contrainte principale de devoir faire la même taille quelque soit l'écran sur lequel elle est affichée
Modérateur
Kiruaa a écrit :
oui mais en css 3 on peut détecter la résolution de l'écran

Non avec les media-queries ont peut détecter la résolution d'impression, la résolution de l'écran étant une constante fixée par rapport au pixel-ratio. => 96dpi pour un pixel-ratio de 1. (mon écran a en réalité 109 dpi mais la résolution en CSS est considérée comme 96dpi)

Tout cela parce que CSS ne connaît pas la réelle résolution de l'écran, parce que le navigateur non plus, ni même l'OS.
Il n'y a donc aucune façon d'obtenir la résolution d'un écran sauf en utilisant la technique que tu as décris précédemment Smiley decu ?

kustolovic a écrit :

La seule manière connue est de demander à l'utilisateur de mesurer une valeur connue sur son écran (une largeur de A4 par exemple) avec un curseur déplaçable pour avoir une résolution (pixels/cm). Mais bon, c'est pas hyper user-friendly comme méthode.
Modérateur
Malheureusement non,
Enfin on peut aussi détecter l'appareil utilisé dont on connait les caractéristiques techniques. Mais pour un PC sur lequel on peut avoir n'importe quel écran, c'est inutile.
Sujet clos
Aller à