모바일 장치 용 링크 href 변경

Question

현재 라이트 박스에 링크 된 텍스트가 있습니다. 휴대 기기에서 별도의 링크를 클릭하면 동일한 위치로 연결됩니다.

나는 JS에 대한 경험이 전혀 없지만 이것이이 문제에 대한 해결책이 될 수 있다고 생각합니다. 가능한 한 간단하게 이해하십시오. 내가 순간을 사용하고

코드 : 사전에

<a class="fancybox" href="#contact_form_pop">Contact Us</a> 
<div class="fancybox-hidden" style="display: none;"> 

<div id="contact_form_pop">[contact-form-7 id="3301" title="test"]</div> 


</div> 

감사합니다!

폴

Answer 1

미디어 쿼리를 사용하여이를 수행 할 수 있습니다.

@media only screen and (min-device-width: 480px){ 
 
    
 
    #specialLink{ 
 
     display: inline-block; 
 
    } 
 

 
} 
 

 
#specialLink{ 
 
    display: none; 
 
}

은 그래서 지금 또는 표시되지 않습니다 것입니다 내 예에 #specialLink으로 식별하여 화면 크기, 링크를 기반으로. 이를 다른 href와 결합하여 다른 모달이나 원하는 것을 타겟팅 할 수 있습니다. https://jsfiddle.net/guyytmjb/

당신은 링크를 제어하고

display: none; 

주변

display: block; 

를 무엇을 사용하여 표시

Answer 2

나는 확실히이 작업을 수행하기 위해 CSS를 사용할 것, 내 jsfiddle 참조 다른 미디어 쿼리.

W3 학교 또는 다른 곳에서 매우 유용하므로 일부 미디어 쿼리 비트를 읽는 것이 좋습니다. 앞으로 나아가고, 이와 같은 질문을하고 일을하는 여러 가지 방법을 찾아 내려고 노력하는 것은 가능한 일과 다양한 방법으로 할 수있는 일을 배우는 좋은 방법입니다.