javascript - 현재 - 자바스크립트 화면 크기




화면 크기, 현재 웹 페이지 및 브라우저 창 가져 오기 (12)

여기 내 해결책이있다!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

모든 주요 브라우저에서 작동하는 windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY 를 어떻게 얻을 수 있습니까?


jQuery를 사용하는 경우 jQuery 메서드를 사용하여 창 또는 문서의 크기를 가져올 수 있습니다.

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

화면 크기의 경우 다음과 같은 방법으로 screen 개체를 사용할 수 있습니다.

screen.height;
screen.width;

다음은 순수한 JavaScript ( w3schools.com/jsref/prop_win_innerheight.asp )가 포함 된 크로스 브라우저 솔루션입니다.

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

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

때로는 창 및 내부 내용의 크기를 조정하는 동안 너비 / 높이가 변경되어야합니다.

이를 위해 모든 크기 조정 및 거의 즉시 업데이트를 동적으로 모니터링하는 로그 상자를 추가하는 작은 스크립트를 작성했습니다.

고정 된 위치와 높은 z- 인덱스를 가진 유효한 HTML을 추가하지만 충분히 작아서 다음을 할 수 있습니다 .

  • 실제 사이트에서 사용
  • 모바일 / 응답 보기를 테스트 할 때 사용하십시오.


테스트 대상 : Chrome 40, IE11이지만 다른 / 구형 브라우저에서도 작동 할 가능성이 높습니다. :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

편집 : 이제 스타일을 로거 테이블 요소에만 적용됩니다 - 모든 테이블에 - 또한 jQuery없는 솔루션입니다 :)


반응 레이아웃과 관련된 일부 경우 $(document).height() 는 뷰 포트 높이 만 표시하는 잘못된 데이터를 반환 할 수 있습니다. 예를 들어 일부 div # 래퍼의 높이가 100 % 인 경우 # 래퍼는 내부의 일부 블록에 의해 확장 될 수 있습니다. 그러나 높이는 여전히 뷰포트 높이와 같습니다. 그런 상황에서는

$('#wrapper').get(0).scrollHeight

이것은 래퍼의 실제 크기를 나타냅니다.


뷰포트 크기가 여러 기기에서 일관성이 없으며 해당 게시물의 모든 답변에 의존 할 수 없기 때문에 데스크톱 및 모바일 브라우저의 실제 뷰포트 크기를 알 수있는 라이브러리를 개발했습니다 ( https://github.com/pyrsmk/W


사용 가능한 화면 크기를 가져 오는 비 jQuery 방식입니다. window.screen.width/height 가 이미 설정되어 있지만 반응이 빠른 웹 디자인 및 완성도를 위해 그 속성을 언급 할 가치가 있다고 생각합니다.

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

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

availWidthavailHeight - 화면에서 사용 가능한 너비와 높이입니다 (OS 작업 표시 줄 등 제외).


여기 내 해결책이있다. 먼저 쿠키로 작업 할 유틸리티 개체가 있습니다.

/* Simple getter and setter for cookies */
(function(global){
    function setCookie(cname, cvalue, exdays) {
        exdays = typeof exdays === 'undefined' && 365;

        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return undefined;
    }

    global.Cookie = {
        get: getCookie,
        set: setCookie
    };
})(window);

그럼 너는 .. 같이 할 수있어.

/* 
  Detect screen width and height and save it to a cookie.
  We are later using it to resize the images accordingly.
*/
if(
    !Cookie.get('screen_width') ||
    !Cookie.get('screen_height') ||
    Cookie.get('screen_width') != screen.width ||
    Cookie.get('screen_height') != screen.height
  ){
  Cookie.set('screen_width', screen.width);
  Cookie.set('screen_height', screen.height);
  location.reload();
}

이렇게하면 서버 측 언어를 사용하여 쿠키를 읽고 사용자 화면의 정확한 이미지 크기를 얻을 수 있습니다.


이제 창 컨텍스트없이 모든 브라우저에서 네이티브 javascript 창 API 단독으로 안전하게 사용할 수 있습니다.

문법은 다소 명확합니다!

n = "<i>px</i><br>"  /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */


       "Device zoom level: " +                         dp
+n+    "Screen width: " +                    screen.width 
*dp+n+ "Screen height: "+                   screen.height 
*dp+n+ "Document frame height: " +            innerHeight
*dp+n+ "Document frame width: " +              innerWidth                             *dp+n+ "Parent document height: "+            outerHeight                            *dp+n+ "Parent document width: "+              outerWidth                             *dp+n+ "Window available height: "+    screen.availHeight                     *dp+n+ "Window available width: "+      screen.availWidth                      *dp+n+ "Document frame max scrollable X: "+    scrollMaxX                             *dp+n+ "Document frame max scrollable Y: "+    scrollMaxY
*dp+n+ "Distance from left screen to window: "+   screenX
*dp+n+ "Distance from top screen to window: "+    screenY
*dp+n    

})()

모든 브라우저와 장치에서 정확한 결과를 얻으려면 결과에 devicePixelRatio를 곱해야합니다.

Window 프로퍼티 devicePixelRatio는 현재의 디스플레이 장치에 대한 실제 픽셀의 해상도와 CSS 픽셀의 해상도의 비율을 반환합니다. 이 값은 픽셀 크기의 비율로 해석 될 수도 있습니다. 하나의 CSS 픽셀 크기를 하나의 물리적 픽셀 크기로 해석 할 수 있습니다. 간단히 말하자면 브라우저에 실제 CSS 픽셀을 그리는 데 사용되는 화면의 실제 픽셀 수를 알려줍니다.

이 기능은 표준 디스플레이에서의 렌더링과 동일한 객체를 그리기 위해 더 많은 화면 픽셀을 사용하는 HiDPI 또는 Retina 디스플레이 간의 렌더링의 차이를 처리 할 때 유용합니다. 그 결과 더 선명한 이미지가 생성됩니다.

이 값이 변경되면 알림을받을 방법이 없습니다 (예 : 사용자가 다른 픽셀 밀도의 디스플레이로 창을 드래그하는 경우). 콜백이나 픽셀 밀도 변화를 감지하는 데 사용할 수있는 이벤트가 없기 때문에 devicePixelRatio의 값이 주기적으로 변경되었는지 확인하는 것이 유일한 방법입니다. 너무 자주하지 마십시오. 성능에 영향을 미칩니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio


크기를 표시하는 데 사용할 수있는 작은 자바 스크립트 북마크 릿을 작성했습니다. 브라우저에 쉽게 추가 할 수 있으며 클릭 할 때마다 브라우저 창의 오른쪽 구석에 크기가 표시됩니다.

북마크 렛 사용 방법에 대한 정보는 https://en.wikipedia.org/wiki/Bookmarklet

북마크릿

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

원본 코드

원래 코드는 커피에 있습니다.

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

기본적으로 코드는 윈도우 크기를 조정할 때 업데이트되는 작은 div보다 선행합니다.


"console"을 사용 하거나 "Inspect"를 클릭하여 현재 웹 페이지의 높이 및 너비를 확인하십시오.

1 단계 : 마우스 오른쪽 버튼을 클릭하고 'Inspect'를 클릭 한 다음 'console'을 클릭하십시오.

2 단계 : 브라우저 화면이 '최대화'모드가 아닌지 확인하십시오. 브라우저 화면이 '최대화'모드 인 경우 먼저 최대화 버튼 (오른쪽 또는 왼쪽 상단 구석에 있음)을 클릭하고 최대화를 해제해야합니다.

3 단계 : 이제 더 큼 기호 ( '>') 뒤에 다음을 씁니다. 즉

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

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




cross-browser