Trouver résolution disponible dans les navigateurs

**jpe54** · 19/04/2013, 10h34

Bonjour,

Je souhaite connaître la résolution disponible dans les navigateurs...

Anciennement les propriétés javascript availWidth / availHeight de l'objet screen me retournaient la largeur de l'écran moins la barre des taches. Sauf erreur, ce n'est plus le cas (voir code joint)...

Ces mots clef sont peut être dépréciés mais je ne trouve pas les remplaçants ! Bref comment faire ?

Merci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
 
<h3>Votre écran</h3>
<script>
document.write("Résolution écran : width/height: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("Résolution Dispo dans le navivateur : Available width/height: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
</script>
 
</body>
</html>

**Cat81** · 19/04/2013, 11h04

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script>
if (document.body){
  //Ici on va chercher l'objet body pour se caler sur ses dimensions à lui
  //C'est ce que tu vas utiliser dans la plupart des cas
  var largeur = (document.body.clientWidth);
  var hauteur = (document.body.clientHeight);
 
}else{
  //Sous IE tu vas utiliser plutôt ça
  //car l'autre méthode est inexistante dans ce navigateur
  var largeur = (window.innerWidth);
  var hauteur = (window.innerHeight);
}
</script>

Voila ^^

**Bovino** · 19/04/2013, 11h04

Sauf erreur, ce n'est plus le cas

Ah... c'est nouveau ça !

Ceci dit, à quoi peuvent bien te servir les dimensions de l'écran ? Ce sont plutôt les dimensions du navigateur qui sont importantes et tout le monde n'a pas son navigateur en plein écran !

**NoSmoking** · 19/04/2013, 12h22

Bonjour,

Envoyé par Cat81

Code :

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

1
2
3
4
  //Sous IE tu vas utiliser plutôt ça
  //car l'autre méthode est inexistante dans ce navigateur
  var largeur = (window.innerWidth);
  var hauteur = (window.innerHeight);

tu es sûr de ton coup?

**jpe54** · 19/04/2013, 12h57

Envoyé par Bovino

Ceci dit, à quoi peuvent bien te servir les dimensions de l'écran ? Ce sont plutôt les dimensions du navigateur qui sont importantes et tout le monde n'a pas son navigateur en plein écran !

Le code fourni avec les dimensions écran ne sert qu'à comparer avec la dimension du navigateur... et cela donne les même résultats soit 1024x768... "Si cela n'est pas nouveau" un peu de pédagogie ne me ferait pas de mal pour voir où se situe ma bévue !

Ce qui m'interesse effectivement est uniquement la dimension de la surface exploitable du navigateur pour déterminer dynamiquement le nombre de vignette à afficher par ligne et colonne sur la surface visible... exemple pour des vignettes de 190x137 :

Code :

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

1
2
var numColumns = Math.floor(screen.availWidth / 190)
var numRows = Math.floor(screen.availHeight / 137)

Quant au plein écran (sauf IE qui permet de faire un fullscreen sans popup) voire masquer ascenseur, j'abandonne car l'utilisation d'un Popup est - sauf erreur ? - toujours obligatoire en 2013...

**NoSmoking** · 19/04/2013, 14h42

Pas sûr que l'approche soit la bonne, si je démarre avec une fenêtre 900x1024, par exemple, et que je redimensionne que ce passe t-il dans ce cas?

**jpe54** · 19/04/2013, 16h43

Envoyé par NoSmoking

Pas sûr que l'approche soit la bonne, si je démarre avec une fenêtre 900x1024, par exemple, et que je redimensionne que ce passe t-il dans ce cas?

onresize devrait permettre cette détection non ? A moi de la gérer...

+=+=+=+=+=+=+=+

En fait ce bout de code met en exergue un comportement de lecture différent du code, à l'ouverture de la page selon le navigateur utilisé.

Absence de <!DOCTYPE HTML> en début de code :
Internet explorer (v 8 - 9 ou 10) n'affiche pas le message d'alerte lors de l'ouverture de la page… un rafraîchissement de l'écran par la touche F5 permet ensuite un retour correct des 2 valeurs.

Firefox (v 20.0.1) affiche correctement les 2 valeurs dès le lancement…

Présence de <!DOCTYPE HTML> en début de code :
Internet explorer n'affiche pas le message d'alerte lors de l'ouverture de la page… un rafraîchissement de l'écran par la touche F5 permet ensuite un retour correct d'une seule des 2 valeurs…

Firefox affiche un retour correct d'une seule des 2 valeurs dès le lancement…

IE est-il buggé ou le problème se situe-t-il entre chaise et clavier (L'informatique étant pour moi la science de la modestie).

Dans ce cas où trouver les informations actualisées et fiable W3C :
1 - Sur la syntaxe strict (case minuscule / majuscule) des mot clefs …
2 - Sur le mode d'interprétation du code (lecture complète puis ligne à ligne ou directement ligne à ligne) ?

Merci de vos avis éclairés pour comprendre (apprendre ?) la logique des navigateurs récents !

Vous pouvez tester mes dires avec ce bout de code…

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html><head>
<title>Test</title>
 
</head>
<body>
<script type="text/javascript">
var largeur = (document.body.clientWidth);
var hauteur = (document.body.clientHeight);
 
alert(largeur + " - " + hauteur);
 
</script>
</body>
</html>

**NoSmoking** · 19/04/2013, 18h55

Absence de <!DOCTYPE HTML> en début de code :

ceci est une très mauvaise idée au départ, il est préférable quoiqu'il arrive de mettre un DOCTYPE.

Présence de <!DOCTYPE HTML> en début de code :
Internet explorer n'affiche pas le message d'alerte lors de l'ouverture de la page… un rafraîchissement de l'écran par la touche F5 permet ensuite un retour correct d'une seule des 2 valeurs…

il faut bien se rendre compte, d'après le code que l'on teste, que le BODY est vide donc hauteur = 0.

Teste en mettant simplement un peu de CSS

Code css :

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

1
2
3
4
5
html, body{
  margin:0;
  padding:0;
  height:100%;
}

**jpe54** · 20/04/2013, 09h00

Merci NoSmoking pour ces remarques... Je souhaite bien évidemment utiliser le DOCTYPE...

Mais même avec du CSS au lancement IE retourne les valeurs 0-0 ! Actualisation par F5 et là des valeurs sont présentes.

Essai sur différents PC et version de IE depuis la V8 le problème existe... Par contre si dans le body je place un texte la longeur de ce texte m'est retournée dés le lancement...

Donc la question reste entière surtout avec les différentes résolutions d'écran existantes et à venir : Quelle instruction Javascript pour connaitre l'espace visible disponible ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html><head>
<style>
	html, body{
  		display:table;
		width:100%;
                height:100%;
		table-layout: fixed;
		vertical-align:middle;	
		background-color:lightgray;
		text-align: center;
	}
 
</style>
<title>Test</title>
 
</head>
<body>
<script type="text/javascript">
var largeur = (document.body.clientWidth);
var hauteur = (document.body.clientHeight);
 
alert(largeur + " - " + hauteur);
 
</script>
</body>
</html>

Il n'y a plus qu'a attendre que le "Responsable Développement Web" intervienne de manière constructive sur ce point pour éventuellement enrichir la FAQ.

Un grand Merci néanmoins aux intervenants de ce post.

**Bovino** · 20/04/2013, 10h07

Code :

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

1
2
3
var fen = document.getElementsByTagName('html')[0];
console.log(fen.clientHeight);
console.log(fen.clientWidth);

**jpe54** · 21/04/2013, 09h22

Simplement : 1000 Mercis et Respects ! Ce code fonctionne parfaitement pourtant je pensais la fonction clientHeight résevée à la famille FireFox...

Votre réponse met une nouvelle fois en évidence que les instructions sont devenues directement dépendantes de l'entête DOCTYPE de la page, puisque votre prposition ne fonctionne qu'en présence de <!DOCTYPE html>..

Puis-je utiliser comme juge de paix vos Tutoriels présents sur ce site pour une liste compléte mais surtout fiable des fonctions HTML / JavaScript acceptées avec cette entête ?

Bien amicalement !

Trouver résolution disponible dans les navigateurs

JavaScript

Discussions similaires

Partager

Partager