회사에서 모바일용 사이트를 만들면서 황당했던 문제인데, 생각난 김에 정리해볼까 합니다.

아이폰(ios)에서는 발생되지 않는 문제이며 안드로이드 os 에서만 발생됩니다.

이외에 타 os는 테스트용 기기가 없어서 확인해보지 못했네요.


이 문제는 absolute 레이어로 페이지를 구성했음에도 하위 레이어의 엘리먼트가 터치 이벤트를 가로채는 현상입니다.

백문이 불여일견이라고 아래 스샷을 보면 이해가 쉬울겁니다.





이미 구글 안드로이드 포럼(링크)에 기재되어 있는 버그이나 아직도 수정되진 않았네요 -_-^


버그수정전까지는 웹 개발자가 임시방편을 취할 수 밖에 없는데요.

상위 레이어를 띄울때 하위 엘리먼트들을 hidden 처리해주어야 합니다.

이렇게 하면 하위 엘리먼트가 터치 이벤트를 가로채는 현상을 막을 수 있습니다.


저도 현재까지는 이 방법밖에 찾지못했네요. ==;

혹시라도 더 좋은 방법을 알고 계신분이 있으면 댓글남겨주세요 :)

저작자 표시 비영리 동일 조건 변경 허락
신고
  1. momo 2012.08.21 22:42 신고

    아 나도 이거땜에 미쳐버림 ㅠㅠ
    모바일로 접속을 안해봐서 몰랐는데 모바일 페이지 다시 만들어야할듯.

    • BlogIcon 꼬마얀 2012.08.22 21:32 신고

      레이어가 뜰때 하위 엘리먼트를 다 hidden 처리하는 편법으로 어느정도 땜빵가능함 ㅡㅡ

      jquery mobile 사이트 참조하면 모바일 쉽게 만들 수 있다




마켓을 돌아다니다가 신기한 놈을 발견했습니다.
제목에서 유추할 수 있듯이 안드로이드 폰에서 앱 개발을 할 수 있게끔 해주는 IDE 입니다.
막상 사용해보니까 화면이 좁은 핸드폰에서보다는 타블렛에서 좀 더 유용하게 사용할 수 있을듯 합니다.

하지만, 폰에서도 간단히 소스를 구동해본다거나 디버깅을 할 때 사용할 수 있어
개발자라면 한번쯤 써보는 것도 나쁘진 않을 것 같네요.

하단의 URL을 통하여 구글마켓에서 설치가능합니다 :)

https://play.google.com/store/apps/details?id=com.aide.ui&feature=search_result#?t=W251bGwsMSwyLDEsImNvbS5haWRlLnVpIl0.
저작자 표시 비영리 동일 조건 변경 허락
신고

+ Recent posts