Få oplyst størrelsen på skærmen, den aktuelle webside og browservinduet

Hvordan kan jeg få windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY, som virker i alle større browsere?

GISKid
Redigeret spørgsmål 2017ør marts 2017 в 8:38
Programmering
cross-browser javascript jquery layout
2010ør august 2010 в 6:28
20 visninger
Løsning

Du kan få størrelsen af vinduet eller dokumentet med jQuery:

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

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

For skærmstørrelse kan du bruge screen objektet:

window.screen.height;
window.screen.width;
Ankit Jaiswal
Redigeret svar 2019ør september 2019 в 4:18
Kommentarer (21)

Den indeholder alt, hvad du har brug for at vide: Få visningsåbning/vinduets størrelse

men i korte træk:

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

Hold venligst op med at redigere dette svar. Det er blevet redigeret 20 gange nu af forskellige personer for at tilpasse deres kodeformatpræferencer. Det'er også blevet påpeget at dette ikke er'nødvendigt hvis du kun ønsker at målrette til moderne browsere - i så fald behøver du kun følgende:

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
Redigeret svar 2019ør september 2019 в 1:56
Kommentarer (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
Redigeret svar 2015ør november 2015 в 7:31
Kommentarer (0)