Verkrijg de grootte van het scherm, de huidige webpagina en het browservenster

Hoe kan ik windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY krijgen die in alle grote browsers werken?

GISKid
Bewerkte vraag 29ste2 maart 2017 в 8:38
Programmering
cross-browser javascript jquery layout
9de0 augustus 2010 в 6:28
17 views
Oplossing

Je kunt de grootte van het venster of document opvragen met jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Voor schermgrootte kun je het screen object gebruiken:

window.screen.height;
window.screen.width;
Ankit Jaiswal
Bewerkt antwoord 16de0 september 2019 в 4:18
Commentaren (21)

Dit heeft alles wat je moet weten: Krijg viewport/venster grootte

maar in het kort:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

Fiddle

Stop alsjeblieft met het bewerken van dit antwoord. Het'is nu 20 keer bewerkt door verschillende mensen om overeen te komen met hun code-indelingsvoorkeur. Het'is er ook op gewezen dat dit'niet nodig is als je je alleen op moderne browsers wilt richten - als dat zo is heb je alleen het volgende nodig:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth,
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);
sidonaldson
Bewerkt antwoord 16de0 september 2019 в 1:56
Commentaren (14)
 
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"></div>');
Jonatas Walker
Bewerkt antwoord 24ste1 november 2015 в 7:31
Commentaren (0)