[JavaScript] [FAQ] Taille utilisable de la fenêtre

[FremyCompany]

Taille utilsable de l'écran (métode 1) :http://www.developpez.net/forums/sho...d.php?t=256838

D'autres solutions que je connais aussi, selon ce que vous désirez savoir :

Taille du document :

Code javascript :

1
2
document.body.offsetWidth
document.body.offsetHeight

ou (mieux)

Code javascript :

1
2
3
var html = document.body.parentNode || document.body;
html.offsetWidth || document.body.offsetWidth;
html.offsetHeigth || document.body.offsetHeight;

Taille de l'écran / de la page web ?

Code javascript :

1
2
screen.height
screen.width

Taille utilisable de l'écran (screen.height/width -barre de taches, ...)

Code javascript :

1
2
screen.availHeight
screen.availWidth

Il faudrait voir ce que chacun des navigateurs accepte, ce qui retourne le bon résultat, ...

[Taum]

Salut,

Pour firefox, la seule méthode qui me semble fiable pour récuperer la taille de la fenêtre (zone affichable uniquement, cad sans les toolbars, scrollbars etc...) est :

Code :

1
2
window.innerHeight
window.innerWidth

screen.width et screen.height renvoient la taille de l'écran (lorsqu'il y a plusieurs écrans, on obtient la taille totale de la surface affichable, ex 2048x768 pour 2 écrans 1024x768 côte à côte)

document.body.clientWidth/clientHeight renvoie la taille totale du body, qui peut être plus ou moins grande par rapport à la taille affichable suivant qu'il y ait des marges, ou que la taille de la page dépasse en hauteur et largeur ...


Edit:
Effectivement en mode de compatibilité (a.k.a. quirks mode) document.body.clientWidth/clientHeight fonctionne comme window.innerHeight/innerWidth
Merci Auteur

[Auteur]

Je vais ajouter mon grain de sel à cette discussion

La présence ou non de doctype a une influence sur les valeurs retournées par ces méthodes. Un exemple avec ce code :
http://www.developpez.net/forums/sho...d.php?t=240526

[Auteur]

voici une liste (non exhaustive ) des propriétés donnant des indications sur les dimensions :

Code X :

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
28
29
30
31
32
WINDOW :
 window.screenTop       window.screenLeft

 window.innerHeight     window.innerWidth   
 window.outerHeight     window.outerWidth

 window.screenX         window.screenY

 window.scrollMaxX      window.scrollMaxY

 window.scrollX         window.scrollY


SCREEN :
 screen.top          screen.left
 screen.width        screen.height


DOCUMENT :
 document.height        document.width


DOCUMENT.BODY :
 document.body.clientTop              document.body.clientLeft
 document.body.clientHeight           document.body.clientWidth

 document.body.offsetTop              document.body.offsetLeft
 document.body.offsetHeight           document.body.offsetWidth

 document.body.scrollTop              document.body.scrollLeft
 document.body.scrollHeight           document.body.scrollWidth

Remarques

• ces propriétés sont en lecture seule. Pour modifier les propriétés d'un élément utiliser :
  • objet.style.height
  • objet.style.width
  • objet.style.left
  • objet.style.top
  Il faut toujours préciser l'unité !
• la valeur retrournée depend du navigateur ;
• certaines de ces propriétés peuvent s'appliquer aux autres objets du document (p, div, img etc...);
• cet exemple vous permet d'accèder à d'autres propriétés (et donc complèter la liste);
• Le DOCTYPE a une influence sur les valeurs retournées (cas le plus flagrant avec Firefox).