모바일에서 링크 태그가 어떻게 다르게 반응합니까?

Question

클릭하면 현재 페이지의 iframe에서 PDF가 열립니다. 휴대 전화/태블릿에서 링크를 클릭하면 바탕 화면의 iframe보다는 읽기가 쉽도록 다른 탭에서 열 수있는 방법이 있는지 궁금합니다.

Answer 1

이 버튼을 클릭하는 방법으로이 경우 문을 추가 고려 :

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
// Do mobile browser commands 
    }else{ 
     //Do desktop browser commands 
    } 

또는 나중에 사용할 수 있도록하는 방법을 만듭니다

이 예제를 참조하십시오

var isMobile = { 
    any: function() { 
     return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); 
    } 
}; 

이 방법은 다음과 같이 사용됩니다 :

그 링크 클릭 동작에

if(isMobile.any()) { 
    // Do mobile specific stuff here 
} 

Answer 2

모바일 및 PC에 대해 서로 다른 두 개의 링크를 가질 수 있습니다. 각기 다른 동작을 할당하고 다른 링크를 표시하거나 숨길 수 있습니다.

$('#pc').click(function(){ 
 
\t \t alert('action for pc'); 
 
\t }); 
 

 
\t $('#mobile').click(function(){ 
 
\t \t alert('action for Mobile'); 
 
\t });

@media screen and (min-width: 0px) and (max-width: 720px) { 
 
    #pc { display: none; } 
 
} 
 
@media screen and (min-width: 720px) and (max-width: 4000px) { 
 
    #mobile { display: none; } 
 
} 
 

 
#mobile{ 
 
    cursor:pointer; 
 
    } 
 

 
#pc{ 
 
    cursor:pointer; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="pc"> 
 
\t <a>Link For PC</a> 
 
</div> 
 

 
<div id="mobile"> 
 
\t <a>Link For Mobile</a> 
 
</div>