dimensions de la fenêtre du butineur ?
Le
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.
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.
<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
<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
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
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.
et ????
Why ?
une image 600/400 affichée/zoomée à 900/600 ça va ne pas être si si
vilain, non ?
(à mon idée)
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
ben, non, ce sont des photos tout de même !
ben il n'y a aucune raison de les pré-orienter vu que la pluspart des
logiciels font ça tout seul...
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 @#&$ !!!
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
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 :
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Bon, je reprends ce binz, d'après (sans jQuery) :
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
...