미디어 쿼리 및 자바 스크립트

화면 해상도가 떨어지는 경우 스크립트를 변경하고 싶습니다. "screen.width"사용에 대한 내용을 읽지 못했습니다.미디어 쿼리 및 자바 스크립트

여기 내 스크립트 코드는 ...

$(function() {  
     $("div.holder").jPages({ 
      containerID: "itemContainer", 
      keyBrowse : true, 
      perPage : 5  
     }); 
    });

예를 들어, 나는 화면 해상도 미만 600 개 픽셀 때 두 개의 게시물을 표시합니다.

감사합니다.

출처

2013-06-04 Ico Portela

[화면 개체의 문서] (https://developer.mozilla.org/en-US/docs/Web/API/window.screen)를 확인하십시오. 게시물 개수를 동적으로 변경하려면 [크기 조정 핸들러] (https://developer.mozilla.org/en-US/docs/Web/API/window.onresize)가 필요할 수도 있습니다. – jbabey

window.innerWidth를 사용하여 창의 크기를 가져올 수 있습니다. 귀하의 예가 다음을 지원하도록 수정되었습니다 :

$(function() {  
    $("div.holder").jPages({ 
     containerID: "itemContainer", 
     keyBrowse : true, 
     perPage : (window.innerWidth < 600 ? 2 : 5)  
    }); 
});

출처

2013-06-04 18:56:01

훌륭한 직업, 여호수아! 하지만 내 의도는 페이지를 새로 고치지 않고 자동으로 변경된다는 것입니다. 이 작업을 수행하는 방법을 알고 있습니까? –

braican에서 언급했듯이 창 개체의 resize 이벤트를 수신 대기 할 수 있습니다. –

resize 이벤트에 처리기를 연결할 수 있습니다. 이 것 때문에 당신이 jQuery를 사용하여 위치 : jQuery의 .resize에 대한

$(function() {  
    $("div.holder").jPages({ 
     containerID: "itemContainer", 
     keyBrowse : true, 
     perPage : 5  
    }); 

    $(window).resize(function() { 
     if(window.innerWidth < 600){ 
      // change perPage to 2 here 
     } 
    }); 
});

문서를() 메소드 - http://api.jquery.com/resize/

출처

2013-06-04 19:53:18 braican

당신은 언급 braican처럼 크기 조정 이벤트 핸들러를 사용할 수 있습니다. 그러나 Throttle으로 연결하는 것이 좋습니다.

다른 옵션은 mediaCheck (matchMedia를 둘러싼 랩퍼)을 사용하는 것입니다.

출처

2013-06-08 02:54:37

미디어 쿼리 및 자바 스크립트

답변

관련 문제