[javascript] 화면 너비가 960 픽셀 미만인 경우 수행

화면 너비가 960 픽셀 미만인 경우 jQuery에서 어떤 작업을 수행 할 수 있습니까? 아래 코드는 내 창 크기에 관계없이 항상 두 번째 경고를 발생시킵니다.

if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}

답변

jQuery를 사용하여 창의 너비를 얻으십시오.

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

답변

크기 조정 이벤트와 결합 할 수 있습니다.

 $(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
 else {
    alert('More than 960');
 }
});

RJ의 경우 :

var eventFired = 0;

if ($(window).width() < 960) {
    alert('Less than 960');

}
else {
    alert('More than 960');
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() < 960) {
            alert('Less than 960 resize');
        } else {
            alert('More than 960 resize');
        }
    }
});

나는 성공하지 않고 http://api.jquery.com/off/ 를 시도 했으므로 eventFired 플래그를 사용했습니다.

답변

그런 일에 jQuery를 사용하지 말고 계속 진행하십시오 window.innerWidth.

if (window.innerWidth < 960) {
    doSomething();
}

답변

자바 스크립트로 미디어 쿼리를 사용할 수도 있습니다.

const mq = window.matchMedia( "(min-width: 960px)" );

if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}

답변

제안 할 것입니다 (jQuery 필요) :

/*
 * windowSize
 * call this function to get windowSize any time
 */
function windowSize() {
  windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
  windowWidth = window.innerWidth ? window.innerWidth : $(window).width();

}

//Init Function of init it wherever you like...
windowSize();

// For example, get window size on window resize
$(window).resize(function() {
  windowSize();
  console.log('width is :', windowWidth, 'Height is :', windowHeight);
  if (windowWidth < 768) {
    console.log('width is under 768px !');
  }
});

CodePen에 추가됨 :
http://codepen.io/moabi/pen/QNRqpY?editors=0011

그러면 var : windowWidth 및 Height with : windowHeight를 사용하여 창 너비를 쉽게 얻을 수 있습니다.

그렇지 않으면 js 라이브러리를 얻으십시오 :
http://wicky.nillia.ms/enquire.js/

답변

// Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 960) {
        $('body').addClass('big-screen').removeClass('small-screen');
    } else {
        $('body').addClass('small-screen').removeClass('big-screen');
    }
}

// Fire.
screenClass();

// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});

답변

사용하다

$(window).width()

또는

$(document).width()

또는

$('body').width()