Få størrelsen på skjermen, den aktuelle nettsiden og nettleservinduet

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

skjermbilde som beskriver hvilke verdier som ønskes]1.

GISKid
Redigerte spørsmål 29. mars 2017 в 8:38
Programmering
cross-browser javascript jquery layout
9. august 2010 в 6:28
8 visninger
Løsning

Du kan få størrelsen på 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 skjermstørrelse kan du bruke objektet screen:

window.screen.height;
window.screen.width;
Ankit Jaiswal
Redigert svar 16. september 2019 в 4:18
Kommentarer (21)

Her finner du alt du trenger å vite: Få visningsvindu/vindusstørrelse

men i korte trekk:

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

Vennligst slutt å redigere dette svaret. Det har blitt redigert 20 ganger nå av forskjellige personer for å matche deres kodeformatpreferanser. Det er også blitt påpekt at dette ikke er nødvendig hvis du bare vil målrette mot moderne nettlesere - i så fall trenger du bare 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
Redigert svar 16. 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
Redigert svar 24. november 2015 в 7:31
Kommentarer (0)