Récupération de la résolution ecran en HTML5

Je sais qu'il est possible de récupérer la résolution des écrans en javascript plus un rechargement de la page.

Est-il maintenant possible grâce à HTML5 de récupérer nativement et donc directement cette résolution sans passer par le palliatif décrit ci-dessus.

Merci

seb

Le HTML 5 est un langage de mise en page, il ne peut pas récupérer une telle information.

Cependant si tu désires éliminer tout javascript de ton site, tu peux travailler avec du HTML exprimé en pourcentages, là tu auras le même résultat partout, mais tu seras vite confronté à quelques limites.

Pour adapter au mieux ton site à différents écrans (par exemple un téléphone portable) il te faudra utiliser les media queries et créer plusieurs versions avec CSS 3

http://www.alsacreations.com/article/lire/930-css3-media-queries.html

En fait je voudrai afficher un nombre différent d'images en fonction de la résolution de l'écran.
Par exemple :

pour un 15 pouces 3 lignes de 4, soit 12 images sur l'écran
pour un 22 pouces 5 lignes de 6, soit 30 images sur l'écran

Donc d'après ta réponse il faudrait attendre HTML 6 !!

Sinon, le javascript ne me gênait pas, mais c'est le rechargement de la page qui en découle qui n'est pas top.

Seb
Modifié par sgandon (02 Mar 2013 - 15:58)

rien ne t'empeche d'afficher toutes les images en php, puis de les réorganiser en javascript, ainsi tu n'auras pas de refresh

sgandon a écrit :
En fait je voudrai afficher un nombre différent d'images en fonction de la résolution de l'écran.
Par exemple :

pour un 15 pouces 3 lignes de 4, soit 12 images sur l'écran
pour un 22 pouces 5 lignes de 6, soit 30 images sur l'écran

Donc d'après ta réponse il faudrait attendre HTML 6 !!

Sinon, le javascript ne me gênait pas, mais c'est le rechargement de la page qui en découle qui n'est pas top.

Seb

Avec les conseils de Ozelian (affichage en pourcentage) et des positionnements flottants pour tes images tu arriveras à faire ce que tu veux avec du Html 4 !

sgandon a écrit :
pour un 15 pouces 3 lignes de 4, soit 12 images sur l'écran
pour un 22 pouces 5 lignes de 6, soit 30 images sur l'écran

Un iPad "retina" a une résolution réelle de 2048px pour 10" je crois bien. Bon le navigateur te dira qu'il fait 1024px.
Il doit y avoir des 13 et 15" en 1920 (écrans haute résolution mis à part - retina étant le nom commercial donné par Apple)
Bref, la dimension physique des écrans n'a plus de sens aujourd'hui.

Donc les Media Queries évoquées plus haut te permettront de réagir en fonction de la résolution de l'écran ou de la largeur de la fenêtre (viewport). Exemples ici-même si tu réduis la largeur de la fenêtre (edit: enfin pas le Forum mais les articles et tuto de www.alsacreations.com) ou http://alsacreations.fr ou http://www.smashingmagazine.com/ (Shift-Ctrl-M si tu es sur Firefox).
Une simple propriété float (CSS2.1) dans une page de largeur pas imposée va placer autant d'images qu'il peut en passer sur 1 ligne puis envoyer les suivantes sur une seconde ligne, etc. Il n'y a souvent pas besoin d'imposer quoi que ce soit mais plutôt utiliser les propriétés natives des navigateurs.
Ensuite tu peux imposer certains comportements ou restrictions avec max-width sur un conteneur ou plus contraignant avec width (...) et ça finit avec le framework Masonry qui permet de passer outre certaines impossibilités actuelles des CSS (si tu as des images de largeur et hauteur toutes différentes par exemple)
Modifié par Felipe (09 Mar 2013 - 10:44)

Merci pour vos réponses mais je vois que je n'ai pas mentionné un critères important: L'intérêt de la chose est que le contenu du site tienne dans l'écran et ceci dès l'ouverture du site. Donc je voudrai restreindre la quantité d'info en fonction de la taille de l'écran du visiteur et ainsi le visiteur n'a pas à utiliser l'ascenseur.

Les conseils de design de site préconisent d'éviter d'avoir à utiliser l'ascenseur pour accéder à l'information.

Donc si je reprend mon écran 15", je sais que je peux afficher au maximum 12 images sans pour autant avoir à utiliser l'ascenseur.

Pour être plus clair, voici le site en question 123sondez.fr, où j'utilise actuellement un bouton http://123sondez.fr/code/pages/images/buttonFullScreen.png pour ajuster le nombre de sondages.

Donc avec un float, je peux contrôler le nombre d'élément en largeur, mais pas en hauteur. D'où le risque de déborder de la taille physique de l'écran et apparition d'un ascenseur.