2012-09-17 6 views
0

휴대 전화 또는 패드의 사용자가 웹 사이트 Verticaly 또는 Horizontaly를보고 내 이미지 크기를 전환해야하는지 알아야합니다.모바일에서 어떤보기가 활성화되어 있는지 감지

예 :

사용자가 가로로 페이지를 볼 경우, 내 이미지의 스타일은 전체 규모가

img{width:100%; height:auto;} 

될 것입니다 볼 수 있지만, 수직의 경우 CSS를 전환해야합니다 내가 등은 그래서 사용자를 볼 수에 따라 좋은 스타일을 취할 수 ... jQuery를 또는 자바 스크립트 또는 미디어 쿼리에서이 같은 일을 달성 할 수있는 방법 그래서

img{width:auto; height:100%;} 

는 시청 t이다 그는 모바일 또는 iPad 페이지에? 당신은 단지 특정 중단 점에 반응하는 CSS를 사용 http://www.devinrolsen.com/javascript-mobile-orientation-detection/

답변

2

당신은 같은 일부 자바 스크립트로 방향을 감지 할 수 있습니까? 이 같은의

종류 :

@media screen and (max-width: 123px /* your value */) { 
    img{width:auto; height:100%;} 
} 
+0

는, 크로스 플랫폼 HTTP를 체크 아웃해야 @Warface는 성가신 일 :( – Warface

+0

을한다 ... 아이 패드, 아이폰에 있지만 안드로이드에서 잘 작동하는 것 같습니다 : fallbacks를 포함하여 주제에 대한 가장 완전한 정보는 //davidbcalhoun.com/2010/dealing-with-device-orientation을 참조하십시오! – JKirchartz

0

안 들려요에서 체포

detectOrientation(); 
    window.onorientationchange = detectOrientation; 
    function detectOrientation(){ 
     if(typeof window.onorientationchange != 'undefined'){ 
      if (orientation == 0) { 
       //Do Something In Portrait Mode 
      } 
      else if (orientation == 90) { 
       //Do Something In Landscape Mode 
      } 
      else if (orientation == -90) { 
       //Do Something In Landscape Mode 
      } 
      else if (orientation == 180) { 
       //Do Something In Landscape Mode 
      } 
     } 
    } 

:

감사

관련 문제