Obtenir la taille de l'écran, la page web en cours et de la fenêtre du navigateur

Question

Comment puis-je obtenir de l' windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY qui fonctionne dans tous les principaux navigateurs?

Answer 1

Si vous utilisez jQuery, vous pouvez obtenir la taille de la fenêtre ou sur le document en utilisant les méthodes jQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

Pour la taille de l'écran, vous pouvez utiliser l' screen objet de la manière suivante:

screen.height;
screen.width;

Answer 2

C'est tout ce que vous devez savoir: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

mais en bref:

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);

http://fiddle.jshell.net/L6uPV/show/4

Answer 3

Un non-jQuery façon de profiter de la dimension de l'écran. window.screen.width/height a déjà été mis en place, mais pour le responsive webdesign et de l'exhaustivité cause, je pense que sa vaut la peine de parler de ces attributs:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth et availHeight - La largeur et la hauteur sur le l'écran (à l'exclusion des OS barres de tâches et par exemple).

Answer 4

function wndsize(){
var w = 0;var h = 0;
//IE
if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
        //strict mode
        w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
        //quirks mode
        w = document.body.clientWidth;h = document.body.clientHeight;
    }
} else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
}
return {width:w,height:h};
}
function wndcent(){
var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
//IE
if(!window.pageYOffset){
//strict mode
if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
//quirks mode
else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
//w3c
else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

Answer 5

Vous pouvez également obtenir la FENÊTRE de largeur et de hauteur, en évitant la barre d'outils du navigateur et d'autres choses. C'est la véritable surface utilisable dans la fenêtre du navigateur.

Pour ce faire, utilisez: window.innerWidth et window.innerHeight propriétés (voir doc à w3schools).

Dans la plupart des cas, il sera le meilleur moyen, par exemple, pour afficher une parfaitement centrée flottante, boîte de dialogue modale. Il vous permet de calculer les positions de la fenêtre, peu importe la résolution de l'orientation ou de la taille de la fenêtre est à l'aide du navigateur.