2012-10-23 3 views
0

iPad에 세로 모드로 다른 텍스트를 표시하려고합니다.jQuery로 iPad 방향에 따라 다른 텍스트 표시

데이터 속성을 사용하여 초상화 텍스트를 저장할 수 있지만 방향 변경을 감지하고 iPad에서 텍스트를 적용하려면 어떻게해야합니까?

내 마크 업은 현재 다음과 같습니다.

<h2 class="searchLink" data-landscape="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam" data-portrait="Lorem ipsum dolor sit amet, consectetur.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam</h2> 

감사

답변

0

이제까지 당신은 CSS을 사용할 수 있습니다, jQuery를 필요가 없습니다 media queries? 들어.

봐 예를 들어 this 튜토리얼 : 당신은 orientationChange event 결합 할 수

+0

이미 미디어 쿼리를 사용하고 있습니다. 그렇다면 장치 너비에 따라 표시/숨기기 (이 경우 h2)를 제안 하시겠습니까? – webworker

+0

물론 가능합니다. 예를 들어, Ipad에 표시하지 않으려는 요소에 대해 미디어 쿼리에'display : none'을 설정할 수 있습니다. – user1717526

+0

DOM에 추가 마크 업을 깨끗하게 유지하고 싶습니다. 따라서 미디어 쿼리를 숨기는 것이 여기에 아주 적합하다고 생각하지 않습니다. – webworker

0

. 당신이 (다른 DOM 라이브러리를 사용할 등입니다) jQuery를/zepto.js를 사용한다면 그래서 당신은

$(window).bind('orientationchange', function() { 
    //call your text swapping fn here 
    }); 

모바일 사파리는 현재 방향을 (가능한 값은 0,90,180 인 나타내는 정수를 반환 window.orientation를 노출 할 수 있습니다 - 90). 그런 다음 fn에서 확인하여 어떤 텍스트를 표시할지 결정할 수 있습니다.

지원되지 않는 브라우저에서 오류가 발생하지 않도록하려면이 모든 내용을 if(window.orientation) 조건으로 묶어야합니다.

관련 문제