Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript dimensions de la fenêtre du butineur ?

dimensions de la fenêtre du butineur ?

15 réponses
Avatar
Une Bévue
Bon j'ai réalisé un ch'ti script d'essai, pour voir ;-)

var body = document.body, html = document.documentElement;
var widths = "clientWidth scrollWidth offsetWidth".split(' ');
var heights = "clientHeight scrollHeight offsetHeight".split(' ');
for(var i = 0, l = widths.length; i < l; i++) {
var width = widths[i];
console.log("body." + width + " = " + body[width]);
console.log("html." + width + " = " + html[width]);
}
for(var i = 0, l = heights.length; i < l; i++) {
var height = heights[i];
console.log("body." + height + " = " + body[height]);
console.log("html." + height + " = " + html[height]);
}


ce qui me donne dans la console :
body.clientWidth = 1332
html.clientWidth = 1347
body.scrollWidth = 1347
html.scrollWidth = 1347
body.offsetWidth = 1332
html.offsetWidth = 1348
body.clientHeight = 0
html.clientHeight = 522
body.scrollHeight = 522
html.scrollHeight = 12
body.offsetHeight = 0
html.offsetHeight = 13

si je "mesure", avec FreeRuler les dimensions de la fenêtre (avec
l'Inspecteur en bas sur Opera Next) j'obtiens :
largeur : 1214 (mon écran de portable fait 1280 pixels de large)
hauteur : 471 / 494 / 519
^__ incluant la barre "top frame" de l'inspecteur
^__ incluant la barre "Elements Network..." de l'insp.
^__ uniquement le "body" de mon document

alors c'est comment qu'on a les -*-bonnes-*- valeurs ?

c'est pour zoomer une image au max.
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Le 11/10/14 19:58, Une Bévue a écrit :

c'est pour zoomer une image au max.



<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 13/10/14 01:29, SAM a écrit :
Le 11/10/14 19:58, Une Bévue a écrit :

c'est pour zoomer une image au max.



<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">




<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="var s=[this.offsetWidth,this.offsetHeight], vh = s[0]>s[1];
if(!this.taille) this.taille=s; // mémorisation affichage originel
if(s[0]>this.taille[0]) { // pour dé-zoomer à taille originale
this.style.width=this.taille[0]+'px';
this.style.height=this.taille[1]+'px';
}
else { // zoom maxi
if(vh){this.style.width='100%';this.style.height='auto';alert('horizontal')}
else {this.style.height='100%';this.style.width='auto';alert('vertical') }
}
// re-positionnement à l'écran
this.id='stef'+Math.random();location='#'+this.id;">


et on s'appuiera sur les css3 pour zoomer progressivement



Pas testé autre que Fx

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 11/10/14 19:58, Une Bévue a écrit :

hauteur : 471 / 494 / 519
^__ incluant la barre "top frame" de l'inspecteur
^__ incluant la barre "Elements Network..." de l'insp.
^__ uniquement le "body" de mon document



Heu ...
n'est-ce point
^__ le "view port" ? (la zone d'affichage)



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 13/10/14 01:29, SAM a écrit :

<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">



AH ouais, pas con, merci beaucoup !

MAIS, ça ne marchera pas dans mon cas car mes images sont générées en
php, prévisualisation, en 600x400.

Il faut donc que je génère une image temporaire qui fasse, au moins, la
taille de l'écran.

Ceci à partir d'images (photos) qui font en réalité 4288x2848 et que je
dois tourner en fonction de la valeur de EXIF:Orientation.
Avatar
SAM
Le 13/10/14 16:59, Une Bévue a écrit :
Le 13/10/14 01:29, SAM a écrit :

<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">



AH ouais, pas con, merci beaucoup !

MAIS, ça ne marchera pas dans mon cas car mes images sont générées en
php, prévisualisation, en 600x400.



et ????

Il faut donc que je génère une image temporaire qui fasse, au moins, la
taille de l'écran.



Why ?
une image 600/400 affichée/zoomée à 900/600 ça va ne pas être si si
vilain, non ?
(à mon idée)

Ceci à partir d'images (photos) qui font en réalité 4288x2848 et que je
dois tourner en fonction de la valeur de EXIF:Orientation.



Ha! en plus elles ne sont pas pré-orientées !
T'exagères !


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 13/10/14 17:09, SAM a écrit :
une image 600/400 affichée/zoomée à 900/600 ça va ne pas être si si
vilain, non ?
(à mon idée)



ben, non, ce sont des photos tout de même !

Ceci à partir d'images (photos) qui font en réalité 4288x2848 et que je
dois tourner en fonction de la valeur de EXIF:Orientation.



Ha! en plus elles ne sont pas pré-orientées !
T'exagères !



ben il n'y a aucune raison de les pré-orienter vu que la pluspart des
logiciels font ça tout seul...
Avatar
Une Bévue
Le 13/10/14 02:29, SAM a écrit :
Heu ...
n'est-ce point
^__ le "view port" ? (la zone d'affichage)




ben aucune des dimensions lues ne correspond à une dimension
=*ïfective=*= ...

même la largeur de la fenêtre est donnée plus grande que celle de mon
écran @#&$ !!!
Avatar
Baton .rouge
On Sat, 11 Oct 2014 19:58:37 +0200, Une Bévue
wrote:

Bon j'ai réalisé un ch'ti script d'essai, pour voir ;-)

var body = document.body, html = document.documentElement;
var widths = "clientWidth scrollWidth offsetWidth".split(' ');
var heights = "clientHeight scrollHeight offsetHeight".split(' ');
for(var i = 0, l = widths.length; i < l; i++) {
var width = widths[i];
console.log("body." + width + " = " + body[width]);
console.log("html." + width + " = " + html[width]);
}
for(var i = 0, l = heights.length; i < l; i++) {
var height = heights[i];
console.log("body." + height + " = " + body[height]);
console.log("html." + height + " = " + html[height]);
}


ce qui me donne dans la console :
body.clientWidth = 1332
html.clientWidth = 1347
body.scrollWidth = 1347
html.scrollWidth = 1347
body.offsetWidth = 1332
html.offsetWidth = 1348
body.clientHeight = 0
html.clientHeight = 522
body.scrollHeight = 522
html.scrollHeight = 12
body.offsetHeight = 0
html.offsetHeight = 13

si je "mesure", avec FreeRuler les dimensions de la fenêtre (avec
l'Inspecteur en bas sur Opera Next) j'obtiens :
largeur : 1214 (mon écran de portable fait 1280 pixels de large)
hauteur : 471 / 494 / 519
^__ incluant la barre "top frame" de l'inspecteur
^__ incluant la barre "Elements Network..." de l'insp.
^__ uniquement le "body" de mon document

alors c'est comment qu'on a les -*-bonnes-*- valeurs ?

c'est pour zoomer une image au max.



Pour commencer, faire une capture d'écran à 100% et mesurer le nombre
de pixels pour connaitre la bonne valeur

--
Les assistés du CAC 40 :
http://www.youtube.com/watch?feature=player_detailpage&v=W5Yx_diRxA8#tH
Avatar
SAM
Le 13/10/14 16:59, Une Bévue a écrit :

Il faut donc que je génère une image temporaire qui fasse, au moins, la
taille de l'écran.



Pour mesurer le viewPort, un truc comme :
<img src="vide.gif"
onload="this.style.width='100%';this.style.height='100%';window.taille=[this.offsetWidth;this.offsetHeight];">

Pas testé, mais yapa d'raison.

Sinon ... un connaisseur :
<http://www.quirksmode.org/dom/w3c_cssom.html>


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 13/10/14 02:29, SAM a écrit :
Heu ...
n'est-ce point
^__ le "view port" ? (la zone d'affichage)




Bon, je reprends ce binz, d'après (sans jQuery) :
<http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window>

il "faudrait" faire :
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

ce qui me donne :
1347 × 641

avec 1347 + grand que mon écran
et 641 qui ne correspond à rien

...
1 2