카카오톡,전화 등 바로가기 아이콘이 모바일 적용 시 안보여요ㅜㅜ
본문
모바일이랑 웹에서 작은창으로 띄우면 안보여지네요ㅜㅜ 전화는 클릭은 되는거같은데 카톡은 눌리지도않네요ㅜㅜ
답변 2
<a href="">
<div class="kakao">
</div>
</a>
처럼 태그 순서를 바꿔보세요
＊<a href="..." class="kakao" target="_blank">...</a> 형태로 작성하시고,
안에 이미지나 아이콘 폰트 등을 넣어 클릭 범위를 명확히 확보.
- 모바일/반응형 환경에서 a 태그가 div 안에서 제대로 감싸이지 않으면,
클릭 이벤트나 스타일이 정상적으로 적용되지 않을 수 있음.
<!-- 기존 (예시) -->
<div class="kakao">
<a href="...">카카오 링크</a>
</div>
<!-- 개선 : a 태그로 감싸고 , a 태그 자체에 클래스 부여 -->
<a href="..." class="kakao" target="_blank">
<span>카카오 링크</span>
</a>
a.kakao 형태로 구조를 단순화하면 클릭/터치가 안정적으로 동작하는 경우가 많음.
＊.kakao, .right_quick_area 등에 모바일 구간에서
- display:none이 걸려있지 않은지,
>모바일 구간(@media (max-width: ... ))에서 .kakao나 .right_quick_area 등에~
- z-index가 충분히 높은지,
>다른 레이어(헤더, 모달, 광고배너)가 아이콘 위를 덮고 있어 클릭이 안 되는 경우가 흔함.
- pointer-events가 none으로 되어 있지 않은지 꼼꼼히 확인
> 간혹 CSS에서 pointer-events: none;이 지정되어 있으면 클릭이 막힙니다.
＊카카오톡 채널 링크 :
- 단순히 카카오톡 채널로 이동하는 URL(pf.kakao.com/…)을 쓴다면,
target="_blank"나 noopener 설정도 함께 확인
- PC 환경에서는 브라우저에서 새 창이 뜨지만,
모바일에서는 카카오톡 앱이 자동으로 열려야 정상 동작함
- HTTPS 사이트에서 http:// 링크를 쓸 때 브라우저가 차단할 수도 있으니,
가급적 "https://pf.kakao.com/~"을 사용.
＊카카오 JS SDK(카카오링크 API) :
- 만약 “카카오톡 공유하기”처럼 카카오 공식 스크립트를 사용해야 하는 기능이라면,
Kakao Developers 문서에 나와 있는 SDK 초기화 및 함수 호출 부분 확인.
- 해당의 경우는 단순 링크로 보이므로, SDK 문제가 아닐 수도 있지만 혹시 모르니 점검.
＊PC에서 브라우저 크기만 줄여서 테스트하시기보다,
실제 모바일 기기나 에뮬레이터로 링크가 제대로 열리는지 확인하시기 바랍니다.