[javascript] 화면, 현재 웹 페이지 및 브라우저 창의 크기를 가져옵니다

내가 얻을 수있는 방법 windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY이는 모든 주요 브라우저에서 작동합니다?

답변

jQuery를 사용하여 창 또는 문서의 크기를 얻을 수 있습니다.

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

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

화면 크기의 경우 screen객체를 사용할 수 있습니다 .

window.screen.height;
window.screen.width;

답변

여기에는 알아야 할 모든 것이 있습니다 : 뷰포트 / 창 크기 얻기

그러나 간단히 말하면 :

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

깡깡이

이 답변 편집을 중지하십시오. 코드 형식 기본 설정에 맞게 다른 사람들이 22 번 수정했습니다. 또한 최신 브라우저 만 타겟팅하려는 경우에는 필요하지 않으며 다음과 같은 경우에만 필요합니다.

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

console.log(width, height);

답변

다음은 순수한 JavaScript ( Source )를 사용하는 크로스 브라우저 솔루션입니다 .

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

답변

사용 가능한 화면 크기를 얻는 비 jQuery 방법입니다. window.screen.width/height이미 준비되었지만 반응 형 웹 디자인 및 완전성을 위해 이러한 속성을 언급 할 가치가 있다고 생각합니다.

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

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

availWidth and availHeight- 화면에서 사용 가능한 너비와 높이 (OS 작업 표시 줄 등 제외).

답변

그러나 반응 형 화면에 대해 이야기하고 어떤 이유로 jQuery를 사용하여 화면을 처리하려는 경우,

window.innerWidth, window.innerHeight

정확한 측정을 제공합니다. 스크롤 막대의 여분의 공간을 제거하더라도 해당 공간을 조정할 필요가 없습니다. 🙂

답변

브라우저 도구 모음 및 기타 항목을 피하면서 WINDOW 너비와 높이를 얻을 수도 있습니다. 그것은이다 브라우저의 창에서 실제 사용할 수있는 공간 .

이렇게하려면 : window.innerWidth 및 window.innerHeight속성을 사용
하십시오 ( w3schools의 doc 참조 ).

대부분의 경우, 예를 들어 완벽하게 중앙에 떠있는 부동 모달 대화 상자를 표시하는 것이 가장 좋은 방법입니다. 브라우저를 사용하는 해상도 방향 또는 창 크기에 관계없이 창에서 위치를 계산할 수 있습니다.

답변

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