Discussion :

[europole]

Bonjour,

j'ai posé cette question dans la section javascript mais elle peut, peut-être, mieux se traiter dans la section css.

Comment faire pour que les pages d'un site internet se redimensionnent automatiquement en largeur en fonction de la résolution d'écran de l'internaute ?
Le principe étant d'avoir toute la page à l'écran, sans avoir à naviguer horizontalement.

Merci.

[Erwan31]

Bonjour,
tout simplement en ne précisant aucun largeur pour le bloc conteneur/initial
mais en règle général mieux vaut prévoir une largeur maximum (via un max-width en pixel) pour des raisons d'ergonomie.

[Macmillenium]

Bonjour,
mais en règle général mieux vaut prévoir une largeur maximum (via un max-width en pixel) pour des raisons d'ergonomie.

Et une largeur minimum via un min-width

[devyan]

Et une largeur minimum via un min-width

+1 Je me suis même demandé si erwan31 n'avait pas fait un lapsus

[europole]

malheureusement ces échanges d'experts me passent très loin au-dessus de la tête. Je n'y comprends rien.

ne peut-on proposer à un malheureux béotiens un code à copier/coller ?

[Erwan31]

Ben c'est pas compliqué quand même <div id="conteneur"></<div> suffit

Et une largeur minimum via un min-width

C'est plutôt déconseillé. A l'heure de la mutiplication des appareils de restitution (ultra-portable, balckberry, iphone...), il est préférable de ne pas contraindre la largeur via une CSS screen qui pourra s'appliquer indifféremment sur tout les navigateurs de mobiles (et plus particulièrement ceux qui n'ont pas implémenté le media handheld (pour appareils portatifs)).
En ce qui me concerne je conseillerais donc de préférence d'implémenter une solution à base de media queries (un des module de CSS3) pour cibler plus précisemment les résolutions qui doivent être prise en compte.

Code :

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

1
2
3
<!--[if !IE]> <-->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen and (min-device-width: 600px)" />
<!--> <![endif]-->

Cette CSS ne s'appliquera qu'aux écran ayant une largeur minimum de 600px.
Les commentaire conditionnel permettent d'extraire IE qui ne comprends pas encore les media queries.
Mais les cas de figure sont tellement nombreux que c'est encore assez compliqué à mettre en place.

Désolé ça demanderait plus d'explication mais plus de temps

[Macmillenium]

Je suis d'accord avec toi pour les media queries mais le min-width reste tout de même pratique pour limiter la fluidité !

Dans tous les cas, une css dédié aux petites résolutions est conseillé. Soit avec le code que tu as proposé, soit avec :

Code :

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

1
2
 
<link rel="stylesheet" type="text/css" href="css/screen.css" media="handheld, only screen and (max-device-width: 600px)" />

ou

Code :

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

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

[Erwan31]

Je suis d'accord avec toi pour les media queries mais le min-width reste tout de même pratique pour limiter la fluidité !

Oui je vois ce que tu veux dire mais dans le cas ou la CSS screen est la seule qui peut être prise en compte (pas de prise en charge des media queries ou du media handhekd) sur un écran de 300px de large cela peut poser problème,
même si les implémentation prgresse et que ça sera heureusement de moins en moins souvent le cas.
Ceci dit je suis d'accord sur le fait qu'il est préférable de déterminer une largeur minimum pour des texte long (par exemple) qui sans ça deviendraient difficilement lisible. A ce niveau là chacun fait sa cuisine comme bon lui semble...
Un autre solution envisageable est de mettre en place un style switcher en haut de la page pour basculer sur la CSS handheld si la navigateur ne peut lire que la CSS screen.
Il y a une foultitude de solutions même s'il faut avouer qu'on en est qu'au balbutiment du webmobile et que les méthodes d'adaptation déployées n'en sont pour la majorité AMHA qu'au stade expérimental.

[Macmillenium]

même si les implémentation prgresse et que ça sera heureusement de moins en moins souvent le cas.
...
Il y a une foultitude de solutions même s'il faut avouer qu'on en est qu'au balbutiment du webmobile et que les méthodes d'adaptation déployées n'en sont pour la majorité AMHA qu'au stade expérimental.

Je suis entièrement d'accord avec toi, ça évolue, ça avance mais cela reste "des bonnes pratiques d'un développeur".
Malheureusement la plus part des pilotes de projets : SSII/WebAgency, s'en foutent des moyens d'accès autres que les ordinateurs sauf à la demande des clients ce qui est très rare ...
Ceci dit, même a un stade expérimental des fois tu trouve obliger d'aller dans un seul sens ...