모바일 웹 사이트의 ImageMap 대안

Question

다음과 같은 문제가 있습니다. jQuery Mobile (데이터는 drupal cms에서 온 것입니다.)

현재 가장 큰 문제는 사용자가 터치하여 추가 정보를 얻을 수있는 이미지가 있다는 것입니다. 문제는 장치가 회전 할 때 이미지가 회전하지 않아야한다는 것입니다.

내 해결책은 장치가 동일한 이미지로 회전되었지만 90도 회전 될 때 이미지를 변경하는 것입니다. 사용자가 터치 할 수있는 지점에 대해서는 사용자 정의 터치 이벤트로 div을 사용합니다. 문제는 이미지가 바뀌면 div이 이미지의 동일한 위치에 있지 않다는 것입니다. (위쪽과 왼쪽이 이제 바뀌 었음을 알고 그에 따라 바꿨습니다. 새로운 왼쪽은 오래된 것입니다.).

이 문제를 해결할 방법이 있습니까? 어쩌면 이미지가 처음부터 회전하는 것을 막을 수 있습니다.

Answer 1

사용 css media queries 장치 방향으로 서로 다른 이미지 회전을 적용합니다 : 당신은 왜 당신이 div의에 터치 이벤트를 잡을 않습니다 ... 이미지 맵을 사용하는 경우

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
    img.class { 
     transform: rotate(270deg); 
     -moz-transform: rotate(270deg); 
     -webkit-transform: rotate(270deg); 
    } 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
    img.class { 
     transform: rotate(270deg); 
     -moz-transform: rotate(270deg); 
     -webkit-transform: rotate(270deg); 
    } 
}