2012-07-26 3 views
2

내 사이트의 모바일/태블릿 화면에 미디어 쿼리를 사용하고 있습니다. 화면이 모바일 용으로 크기가 작아지면 꽤 많은 jquery 토글 함수를 사용하여 일부 콘텐츠를 축소 할 수 있지만 필요한 경우 확장 할 수 있습니다.미디어 쿼리 및 JQuery 문제

내 문제는 항목을 확장하고 (표시) 확장 한 다음 장치를 가로로 회전해도 항목이 확장 된 상태로 유지되지만 다른 미디어 쿼리가 해당 div 또는 whatvere가 숨겨져 있음을 나타내는 것입니다. Jquery 토글은 스타일 속성을 CSS가 아닌 실제 HTML에 추가하기 때문에 이것이라고 생각합니다. 올바른 페이지를 얻을 수있는 방법이 있습니까? 토글을 재설정 하시겠습니까? 그 말이 맞는다면?

감사

데이브

답변

2

사이트에 다음 코드를 추가 할 경우 당신이 다음 CSS에서 사용할 수있는 가로 또는 세로 중 하나의 몸 노드에 클래스를 추가합니다. 희망적으로 도움이 될 것입니다.

당신의 기능에
window.onorientationchange = function() { 
    var orientation = window.orientation; 
    if (orientation == 0) { 
    document.body.setAttribute("class","portrait"); 
    }else{ 
    document.body.setAttribute("class","landscape"); 
    } 
} 
0

, 당신은 그렇게처럼 CSS 규칙을 다시 작성할 수 있습니다 :

document.styleSheets[0].cssRules[1].style.some_attribute='some value'; 

규칙의 순서가 1 (0에서 시작)