아이폰/아이패드 에서 웹 더블 탭해야 링크 이동 문

안녕하세요.

혹시나 하고 여쭈어 봅니다.

타 기기들은 문제 없이 웹에서의 링크들이 다 잘작동하는데

아이폰이나 아이패드 ios기기들에서의 웹브라우저에서만 유독 hover가 있으면 더블탭을 해야 링크 작동이 된다는 이슈를 알게되었습니다.

그리하여 다음 코드를 입력하여 해결하려고 했습니다.

add_action( 'wp_footer', function() { ?>
    <script>
		jQuery(function($) {
			$("a").on("click touchend", function(e) {
			var el = $(this);
			var link = el.attr("href");
			window.location = link;
		  });
		});
    </script>
<?php } );

해결이 되는가 싶었는데

이 코드로 인하여 게시판 내의 게시물이나 기타 일반 링크(hover등등 없을경우)를 클릭하였을때 링크 속성이 새창으로 띄우기로 되어있으면

새창으로도 링크가 열리고, 현재 페이지에서도 링크가 열립니다.

그리하여 생각한것이 그럼 아이폰,아이패드,ios기기일때 감지하면 좋을것 같아 알아보았습니다.

그러나 알아본 코드와 위 코드를 접목시켜서

하려고 해보았으나... 실패하여 혹시나 하고 방법을 알수있을까 하고 도움을 요청합니다.

감사합니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    올려주신 코드를 적용하시면

    실제 <a> 태그의 링크 이동과 추가하신 코드가 동시에 동작하는 문제가 있을 수 있습니다.

     

    모바일에서 터치는 마우스 클릭과 동일하기 때문에

    모바일에서만 hover 속성을 사용하지 않는 것도 하나의 방법일 듯합니다.

     

    비회원으로도 확인 가능한 페이지 주소 알려주시면

    CSS 코드로 가능할지 살펴보겠습니다.

    고맙습니다.

  • http://kjh8822.cafe24.com/

    제가 만들고있는 웹 주소는 위와 같습니다.

    cosmosfarm에서 제작한 테마가 아니기에 도움을 받을수 있을지 모르겠습니다...

    예를 들어 아이폰에서 상부 로고 클릭시 메인페이지 링크, 로그인, 회원가입 페이지 링크 등등등에 호버가 있어 두번 눌러야되는 상황이 되었습니다...

    살펴봐 주신다니 감사하겠습니다.

  • 올려주신 페이지 주소로 확인해보니

    메뉴 쪽에도 hover 속성이 적용되어 있지만 링크는 정상적으로 이동하고 있습니다.

    로그인, 회원가입 링크는 CSS 코드로 수정하기엔 어려움이 있어 보입니다.

    해당 버튼들은 어떻게 추가하신 건지요?

    아이콘이 아닌 이미지나 텍스트로도 테스트를 해보셔야 할 듯합니다.

    고맙습니다.

  • add_action( 'wp_footer', function() { ?>
        <script>
    		jQuery(function() {
    		  $("*").on( 'touchstart', function() {
    			$(this).trigger('hover') ;
    		  } ).on('touchend', function() {
    			$(this).trigger('hover') ;
    		  } ) ;
    		})() ;
        </script>
    <?php } );

    아마 테스트 해보셨을때 위 코드가 적용되 있었을것같네요.

    새로운 코드를 적용하고 테스트 해보았지만

    다른 새로운 문제들이 생겨 고민중에 있습니다.

     

    현재는 코드를 삭제해둔 상태이며, 아까 테스트와다르게 호버 속성이 있을경우에 아이폰에서는 호버 값으로 인하여 로고나 회원가입, 로그인 버튼을 2번씩 탭 해야지만 링크로 이전되고있을것입니다.

    두번 탭 정말 어렵네요...

     

    로그인 회원가입 링크버튼은 테마 자체적으로 되어있던것을 사용하였습니다.

    아마 테마가 모든 기기에서 테스트를 다하지않았던것 아닐까 싶네요.

    답변 주셔서 감사합니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요