모바일웹 개발시 알아두면 유용한 8가지

1. Javascript의 onClick 이벤트 사용시 아이폰 문제

iPhone에서 onClick 이벤트가 동작하지 않는 경우가 종종 있다. 이는 html 엘리먼트에 cursor 속성이 없기때문이다. 아이폰에서는 click 이벤트가 동작하지 않습니다.
혹자는 touchstart 이벤트를 걸어서 사용하면 된다고 하는데 touchstart는 말 그대로 터치를 시작하는 순간에 발생하는 이벤트라 스크롤이 필요한 곳에서 사용하는 경우 오동작을 초래 합니다.
아래와 같이 anchor 속성이 아닌 태그에 click이벤트를 거는 경우 반드시 아래와 같이 cursor 속성을 강제로 지정해주어야 합니다.

 

2. 오리엔테이션 가로모드시 폰트가 멋대로 확대/축소되는 문제

fontsize_portrait_mode  fontsize_landscape_mode

그림과 같이 웹킷에는 기본적으로 텍스트 사이즈를 뷰사이즈에 맞게 확대/축소해주는 기능이 있습니다.
이로 인해 발생하는 문제이며, 해결방법은 원하는 곳에 CSS를 다음과 같이 추가해주시면 됩니다.

 

3. 오리엔테이션 이벤트가 발생한 시점 알아내는 방법

jQuery를 사용하여 작성하였으니 참고해주시기 바라며, 반드시 document가 아닌 window의 이벤트를 참조해야 합니다.
is_portrait() 와 is_landscape() 함수를 보시면 알 수 있듯이 오리엔테이션의 방향 역시 판단할 수 있으니 참고하시기 바랍니다.
저의 경우 오리엔테이션시 강제로 잡아놓은 영역들의 넓이와 높이 값을 조정하는 용도로 활용했습니다.

 

4. Web에서 앱 설치여부를 판단하는 방법

물론 웹은 모바일 디바이스에서의 웹이오니 착오 없으시기 바라며, 검색해보시면 여러 개발자 분들께서 만들어 올려놓으신 소스를 쉽게 찾아볼 수 있습니다.
제가 작성한 하단의 설치여부 스크립트는 앱에서 URL Scheme를 만들어놓고 해당 스키마로 즉, 해당 앱으로 연결이 되지 않을때 스토어로 이동하게 처리하였습니다.
단, 예외 사항이 있었는데요~ 기존 안드로이드 하이브리드앱에서 구현시 동작이 되지 않았습니다. 아마도 컴파일된 브라우저 버전이 낮아서 일꺼란 추측정도만 하고 있습니다.

5. 갤럭시S4에서 border-radius가 비적용 문제

갤럭시S4의 펌웨어 버그라고들 하는데요, 처음에 이문제를 접했을때, 당황스러웠습니다.
라운드 처리된 박스모양이 나와야 하는데 가장 최신형이라는 폰에서 그런 문제가 나오니 겪어보시면 황당하리라 생각합니다.
이럴 경우 다음과 같이 하시면 제대로 출력됩니다.

 

6. background-size가 안먹는 경우

레티나와 같은 화면 비율에 따른 CSS처리하실 때 사용하는 속성인데요, 약간의 주의가 필요합니다.
background: url(‘url’) no-repeat…. 이런 식으로 사용하시면 background안에 사이즈 속성까지 잡아버리기 때문에 반드시  background-size를 나중에 선언해서 사용해야만 제대로 적용이 됩니다.
만약, background-image로 이미지를 적용하셨다면 위와 같은 문제는 만나지 않으실 수 있으니 참고하세요!

 

7. Highlight영역 커스텀 하기

기본적으로 버튼이나 링크영역을 터치하면 검정색으로 누르는 효과가 나타납니다.
여기서 알려드리는 팁은 그 검정색을 변경하는 방법에 대한 소개입니다.

.no-highlight 클래스를 태그에 적용해놓으면 기본형으로 설정되니 참고하세요.

 

8. 배지 만들기

IMG_1297

푸시를 하면서 배지가 필요하게 되어 CSS를 이용해 간단하게  만들어보았습니다.
상단에 보시면 뱃지 보이시죠? 아이폰에서 제공하는 기본스타일이며 그림과 같이 표현되니 응용해서 사용하면 됩니다.
CSS3가 제대로 지원되지 않는 브라우저에서는 표현이 안되니 참고하세요!

 

 

 

추후 더 발견되면 지속적으로 추가하도록 하겠습니다.
갑자기 정리해서 적으려니 기억이 안나는게 많네요!!

Published by

안반장

Web과 App 개발을 하고 있으며 최근 워드프레스에 관심이 많아져 네이버 카페 워드프레스 홈페이지의 TF팀으로 활동 중 입니다.개인적으로는 안반장의 개발 노트라는 블로그를 운영하면서 개발의 즐거움과 고충들을 차곡차곡 담아가고 있습니다.

  • Mins

    정말 잘 참고했습니다. 감사합니다 ^^

    • 방문 감사하구요! 최근 작업하면서 겪은 이슈들이 많은데요 시간될때 다시한번 포스팅 할 예정입니다. ㅋㅋ