복붙노트

[JQUERY] 하여 화면의 크기, 현재 웹 페이지와 브라우저 창을 받기

JQUERY

하여 화면의 크기, 현재 웹 페이지와 브라우저 창을 받기

해결법

  1. 1.당신은 jQuery로 창이나 문서의 크기를 얻을 수 있습니다 :

    당신은 jQuery로 창이나 문서의 크기를 얻을 수 있습니다 :

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

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

    화면 크기의 경우에는 화면 개체를 사용할 수 있습니다 :

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

  2. 2.가져 오기 뷰포트 / 창 크기 : 이것은 당신이 알아야 할 모든 것을 갖추고 있습니다

    가져 오기 뷰포트 / 창 크기 : 이것은 당신이 알아야 할 모든 것을 갖추고 있습니다

    하지만 짧은 :

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

  3. 3.여기에 순수 자바 스크립트 (소스)와 크로스 브라우저 솔루션입니다 :

    여기에 순수 자바 스크립트 (소스)와 크로스 브라우저 솔루션입니다 :

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

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

  4. 4.비의 jQuery 방법은 가능한 화면 크기를 얻을 수 있습니다. window.screen.width / 높이가 이미 있지만, 반응자인 내가 그 가치는 이러한 속성을 언급하는 생각 완전성을 위해 올려되었습니다

    비의 jQuery 방법은 가능한 화면 크기를 얻을 수 있습니다. window.screen.width / 높이가 이미 있지만, 반응자인 내가 그 가치는 이러한 속성을 언급하는 생각 완전성을 위해 올려되었습니다

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

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

  5. 5.우리가 응답 화면에 대해 그리고 만약 이야기하지만 우리가 어떤 이유로 jQuery를 사용하여 처리하는 경우,

    우리가 응답 화면에 대해 그리고 만약 이야기하지만 우리가 어떤 이유로 jQuery를 사용하여 처리하는 경우,

    window.innerWidth, window.innerHeight

    정확한 측정을 제공한다. 심지어는 스크롤 바의 여분의 공간을 제거하고 우리는 그 공간을 조정에 대해 걱정할 필요가 없습니다 :)

  6. 6.

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

  7. 7.높이와 "콘솔"을 사용하는 웹 사이트의 현재로드 된 페이지의 폭을 확인 또는 "검사"를 클릭 한 후합니다.

    높이와 "콘솔"을 사용하는 웹 사이트의 현재로드 된 페이지의 폭을 확인 또는 "검사"를 클릭 한 후합니다.

    1 단계 : 마우스 오른쪽 버튼을 클릭하고 '콘솔' '검사'다음 클릭 클릭

    2 단계 : 브라우저 화면이 '최대화'모드에 있지해야합니다 있는지 확인하십시오. 브라우저 화면은 '최대화'모드에있는 경우, 먼저 (중 오른쪽 또는 왼쪽 상단 구석에 현재) 최대화 버튼을 클릭하고 창을 해제 극대화 할 필요가있다.

    3 단계 : 이제 ( '>') 부호보다 큰 후 다음의 물품, 즉

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

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

  8. 8.당신은 또한 브라우저의 도구 모음 및 기타 물건을 피하고, 윈도우 폭과 높이를 얻을 수 있습니다. 이 브라우저 창에서 실제 사용할 수있는 영역입니다.

    당신은 또한 브라우저의 도구 모음 및 기타 물건을 피하고, 윈도우 폭과 높이를 얻을 수 있습니다. 이 브라우저 창에서 실제 사용할 수있는 영역입니다.

    이렇게하려면 사용 : window.innerWidth 및 window.innerHeight 특성 (W3 스쿨에서 참조 문서).

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

  9. 9.문서의 폭과 높이 (페이지 너비와 사진의 페이지 높이)에 대한 진정한 방탄 솔루션을 필요로하는 경우, jQuery.document 크기 광산의 플러그인을 사용하여 고려할 수 있습니다.

    문서의 폭과 높이 (페이지 너비와 사진의 페이지 높이)에 대한 진정한 방탄 솔루션을 필요로하는 경우, jQuery.document 크기 광산의 플러그인을 사용하여 고려할 수 있습니다.

    그것은 단지 하나의 목적을 가지고 : jQuery를하고 다른 방법이 실패 할 경우에도 항상 시나리오에서 정확한 문서 크기를 반환합니다. 그 이름에도 불구하고, 당신은 반드시 jQuery를 사용할 필요가 없습니다 - 그것은 jQuery를하지 않고 바닐라 자바 ​​스크립트와 작품에 기록 된, 너무.

    용법:

    var w = $.documentWidth(),
    h = $.documentHeight();

    글로벌 문서. 다른 문서의 경우, 예를 들어, 가 iframe을 임베디드에 당신은 매개 변수로 문서를 전달할에 액세스 할 수 있습니다 :

    var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

    업데이트 : 이제 창 치수도

    이제까지 버전 1.1.0 이후, jQuery.documentSize는 창 크기를 처리합니다.

    즉 필요 때문이다

    jQuery.documentSize는 이러한 문제를 해결 $ .windowWidth ()와 $ .windowHeight ()를 제공합니다. 자세한 내용은 문서를 확인하시기 바랍니다.

  10. 10.나는 질문 10 년에 대해 가지고 놀라게하고 지금까지 아무도 아직 (10 개 값) 전체 답을주지 것 같습니다. 나는 조심스럽게 OP 질문 (특히 사진)을 분석하고 어떤 말을 그래서

    나는 질문 10 년에 대해 가지고 놀라게하고 지금까지 아무도 아직 (10 개 값) 전체 답을주지 것 같습니다. 나는 조심스럽게 OP 질문 (특히 사진)을 분석하고 어떤 말을 그래서

    함수의 크기 () { (contentWidth = ... document.body.children] .reduce하자 (a, EL) => Math.max (a, el.getBoundingClientRect (). 오른쪽), 0) - document.body.getBoundingClientRect () X]. 반환 { windowWidth : document.documentElement.clientWidth, windowHeight : document.documentElement.clientHeight, 페이지 폭 : Math.min (document.body.scrollWidth, contentWidth) pageHeight : document.body.scrollHeight, screenWidth : window.screen.width, screenHeight : window.screen.height, 페이지 X : document.body.getBoundingClientRect () X. 페이지 Y :. document.body.getBoundingClientRect () Y, screenX : -window.screenX, screenY : -window.screenY - (window.outerHeight-window.innerHeight) } } // 테스트 기능 표시 () { CONSOLE.LOG (크기 ()); } 몸 {여백 : 0} .box {폭 : 3000px; 높이 : 4000px; 배경 : 빨간색; }

    주의 : 유래 조각은, screenX-Y에 대한 잘못된 값을 제공합니다 당신이 당신의 페이지에 해당 코드를 복사하면되지만 직접 값을 바로로
    될 것입니다 <버튼의 onclick = "쇼 ()"스타일 = ""> CALC

    나는 크롬 83.0, 사파리 13.1, 파이어 폭스 77.0 및 Edge 83.0에서 테스트

  11. 11.나는 작은 자바 스크립트 당신이 크기를 표시하는 데 사용할 수있는 북마크를 썼다. 당신은 쉽게 당신의 브라우저에 추가 할 수 있습니다 당신이 그것을 클릭 할 때마다 브라우저 창의 오른쪽 모서리에있는 크기를 볼 수 있습니다.

    나는 작은 자바 스크립트 당신이 크기를 표시하는 데 사용할 수있는 북마크를 썼다. 당신은 쉽게 당신의 브라우저에 추가 할 수 있습니다 당신이 그것을 클릭 할 때마다 브라우저 창의 오른쪽 모서리에있는 크기를 볼 수 있습니다.

    여기에서 당신은 어떻게 북마크를 사용하는 정보를 찾을 수 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()
)()

    기본적으로 코드는 당신이 당신의 창 크기를 조정할 때 업데이트하는 작은 사업부를 앞에 추가된다.

  12. 12..height의 반응 레이아웃 $ (문서)와 관련된 어떤 경우에는 () 디스플레이 포트 높이 만 볼 수 있다는 잘못된 데이터를 반환 할 수 있습니다. 예를 들어 높이가 갖는 일부 래퍼 DIV 번호시 : 100 %, 즉 #wrapper은 내부의 블록으로 신장 될 수있다. 그러나 높이 아직도 뷰포트의 높이와 같은 것입니다. 이러한 상황에서 당신은 사용할 수 있습니다

    .height의 반응 레이아웃 $ (문서)와 관련된 어떤 경우에는 () 디스플레이 포트 높이 만 볼 수 있다는 잘못된 데이터를 반환 할 수 있습니다. 예를 들어 높이가 갖는 일부 래퍼 DIV 번호시 : 100 %, 즉 #wrapper은 내부의 블록으로 신장 될 수있다. 그러나 높이 아직도 뷰포트의 높이와 같은 것입니다. 이러한 상황에서 당신은 사용할 수 있습니다

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

    즉, 래퍼의 실제 크기를 나타낸다.

  13. 13.화면 크기에 관한 전체 가이드

    화면 크기에 관한 전체 가이드

    자바 스크립트

    높이 :

    document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

    참고 : 창을 최대화하면이 screen.availHeight 동일합니다

    폭 :

    document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

    JQuery와

    높이 :

    $(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.

    폭 :

    $(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

    참조 : https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

  14. 14.나는 뷰포트의 크기는 장치에 걸쳐 inconsistents이기 때문에, 데스크탑 및 모바일 브라우저의 실제 뷰포트의 크기를 알고에 대한 라이브러리를 개발하고 (모든 나는 이것에 대해 이루어진 연구에 따르면) 해당 게시물의 모든 대답에 의존 할 수 없습니다 : https : //로 GitHub의 .COM / pyrsmk / W

    나는 뷰포트의 크기는 장치에 걸쳐 inconsistents이기 때문에, 데스크탑 및 모바일 브라우저의 실제 뷰포트의 크기를 알고에 대한 라이브러리를 개발하고 (모든 나는 이것에 대해 이루어진 연구에 따르면) 해당 게시물의 모든 대답에 의존 할 수 없습니다 : https : //로 GitHub의 .COM / pyrsmk / W

  15. 15.윈도우 및 내부 컨텐츠의 크기를 변경할 경우에 당신은 너비 / 높이 변경 사항을 확인해야합니다.

    윈도우 및 내부 컨텐츠의 크기를 변경할 경우에 당신은 너비 / 높이 변경 사항을 확인해야합니다.

    이를 위해 동적으로이 크기 조정 및 즉시 업데이트 모두를 감시하는 로그 박스를 추가하는 작은 스크립트를 작성했습니다.

    그것은 고정 된 위치와 높은 Z- 인덱스와 유효한 HTML을 추가하지만 작은 충분하다, 그래서 당신은 할 수 있습니다 :

    에서 테스트 : 크롬 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를 무료 솔루션입니다 :)

  16. 16.ES2020에 globalThis의 도입으로 당신은 같은 속성을 사용할 수 있습니다.

    ES2020에 globalThis의 도입으로 당신은 같은 속성을 사용할 수 있습니다.

    화면 크기 :

    globalThis.screen.availWidth 
globalThis.screen.availHeight

    창 크기에 대한

    globalThis.outerWidth
globalThis.outerHeight

    오프셋 :

    globalThis.pageXOffset
globalThis.pageYOffset

    ...& 곧.

    경고 ( "화면 폭 :"+ globalThis.screen.availWidth + "\ nScreen 신장 :"+ globalThis.screen.availHeight)

  17. 17.당신이 얻을 수있는 화면 개체를 사용할 수 있습니다.

    당신이 얻을 수있는 화면 개체를 사용할 수 있습니다.

    다음은 반환 무엇의 예입니다 :

    Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

    화면 높이와 같은 화면 폭의 변수 만 사용 screen.width를 얻으려면, 당신은 단지 screen.height를 사용합니다.

    당신의 창 너비와 높이를 얻으려면, 그것은 screen.availWidth 또는 screen.availHeight에게 각각 일 것이다.

    페이지 X와 페이지 Y 변수 내용이 왼쪽 / TOP-EST 화면 VERY LEFT / TOP부터라고 window.screenX 또는 Y. 주를 사용한다. 그래서 당신은 다음 오른쪽 화면의 왼쪽 창 500 픽셀이 2420 (1920 + 500)의 X 값을 가질 것이다 1,920 폭의 두 개의 화면이있는 경우. screen.width은 / 높이 그러나, 현재 화면의 폭이나 높이를 표시.

    페이지, 사용 jQuery를 $ (창) .height의 () 또는 $ (창) .width ()의 폭과 높이를 얻으려면.

    다시 jQuery를 사용하여, $ ( "HTML"). 오프셋 (offset). 상단과 $를 ( "HTML")를 사용합니다. 오프셋 (offset). 당신의 페이지 X 및 페이지 Y 값을 떠났다.

  18. 18.// innerWidth CONST screen_viewport_inner = () => { W = 윈도우하자, `난을 inner` =; 만약 (! 창에서 (`innerWidth`)) { `난을 client` =; = document.documentElement || w 는 document.body; } 반환 { 폭 : '$ {I} Width`] w, 신장 w [ '$ {I} Height`] } }; // outerWidth CONST screen_viewport_outer = () => { W = 윈도우하자, O = 'outer`; 만약 (! 창에서 (`outerWidth`)) { client` '= O; = document.documentElement || w 는 document.body; } 반환 { 폭 : '$ {O} Width`] w, 신장 w [O '$ {} Height`] } }; // 스타일 const를 console_color =` 색상 : RGBA (0,255,0,0.7); 폰트 크기 : 1.5rem; 국경 : 1 픽셀의 빨간색으로; `; // 테스트 CONST 시험 = () => { ) (i_obj = screen_viewport_inner하자; CONSOLE.LOG (`screen_viewport_inner % C = \ n`, console_color, JSON.stringify (i_obj, NULL, 4)); ) (o_obj = screen_viewport_outer하자; CONSOLE.LOG (`screen_viewport_outer % C = \ n`, console_color, JSON.stringify (o_obj, NULL, 4)); }; // 인생 (() => { 테스트(); }) ();

    // innerWidth CONST screen_viewport_inner = () => { W = 윈도우하자, `난을 inner` =; 만약 (! 창에서 (`innerWidth`)) { `난을 client` =; = document.documentElement || w 는 document.body; } 반환 { 폭 : '$ {I} Width`] w, 신장 w [ '$ {I} Height`] } }; // outerWidth CONST screen_viewport_outer = () => { W = 윈도우하자, O = 'outer`; 만약 (! 창에서 (`outerWidth`)) { client` '= O; = document.documentElement || w 는 document.body; } 반환 { 폭 : '$ {O} Width`] w, 신장 w [O '$ {} Height`] } }; // 스타일 const를 console_color =` 색상 : RGBA (0,255,0,0.7); 폰트 크기 : 1.5rem; 국경 : 1 픽셀의 빨간색으로; `; // 테스트 CONST 시험 = () => { ) (i_obj = screen_viewport_inner하자; CONSOLE.LOG (`screen_viewport_inner % C = \ n`, console_color, JSON.stringify (i_obj, NULL, 4)); ) (o_obj = screen_viewport_outer하자; CONSOLE.LOG (`screen_viewport_outer % C = \ n`, console_color, JSON.stringify (o_obj, NULL, 4)); }; // 인생 (() => { 테스트(); }) ();

  19. 19.나는 반응 JS 프로젝트의 화면 폭을 얻을 관리 방법이 :

    나는 반응 JS 프로젝트의 화면 폭을 얻을 관리 방법이 :

    폭 1680 같으면 다음 (570), 그렇지를 반환 200

    var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

    Screen.availWidth

    20. from https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 동적으로 생성 된 요소에 의해 트리거 이벤트는 이벤트 핸들러에 의해 캡처되지 않습니다  (0) 2020.09.22
[JQUERY] 하지 추가 할 수 있습니다 <script> 요소  (0) 2020.09.22
[JQUERY] Ajax를 사용하여 하나 개의 형태로 데이터 및 파일을 업로드?  (0) 2020.09.22
[JQUERY] 아약스 포스트에서 핸들 파일 다운로드  (0) 2020.09.22
[JQUERY] 요소에 텍스트를 선택 (마우스로 강조 유사)  (0) 2020.09.22
,

티스토리툴바