CSS를 사용하는 iOS 장치에 대한 링크 사용 안 함

이미지 갤러리가 있습니다. 이미지는 iPhone 화면을 채울만큼 충분히 큽니다.CSS를 사용하는 iOS 장치에 대한 링크 사용 안 함

이미지는 당신이 상상할 수 있도록 당신이 끊임없이 실수로 링크를 클릭하고 있기 때문에, 스크롤이 아이폰에 상당히 좌절되고, 또한 링크입니다.

어쨌든 CSS를 사용하여이 문제를 방지 할 수 있습니까?

그렇다면이 문제에 대한 가장 간단한 해결책은 무엇입니까?

감사합니다.

출처

2012-07-17 Anonymous

나는 (CSS 정말 HTML 요소의 동작을 변경하도록 설계되지 않았습니다)는 CSS 기반의 솔루션이 있다고 생각하지 않습니다.

페이지로드시 JavaScript를 사용하여 브라우저의 뷰포트 너비를 확인한 다음 뷰포트가 휴대 전화 크기 인 경우 링크를 찾고 비활성화/제거 할 수 있습니다.

PPK’s ‘A Tale of Two Viewports’ article을 확인하여 상황에 따른 너비를 알아보기 위해 확인할 JavaScript 속성을 확인하십시오. (필자는 머리 위로 외기를 기억하기에 충분한 모바일 개발을 수행하지 못했습니다.)

출처

2012-07-17 19:18:26

자바 스크립트를 사용하는 것이 좋습니다. 그러나 CSS 만 사용하는 방법을 발견했습니다. 첫 번째 단계는, 당신은 클라이언트 브라우저를 식별해야합니다 단지 HTML 파일에 HEAD 세션에서 아래의 코드를 추가합니다 :

클라이언트가 아이폰의 브라우저를 사용하는 경우에만

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

, "iphone.css"의 내용 로드됩니다. 당신의 연결에 대한 참조를 추가, 갤러리의 HTML 코드에서

.disableLink { 
    pointer-events: none; 
    cursor: default; 
}

:이 파일 "iphone.css"에서

, 당신은 링크를 해제하는 클래스를 만들 필요가

<a href="link.html" class="disableLink"> IMAGE </a>

이 단계는 iPhone/iPod touch에서만 작동하지만 두 번째 참조를 보면 iPhone 4/iPod touch 4G에 적응하는 방법이 표시됩니다.

출처

2012-07-17 19:28:46 well

나는 이라는 아이디어를 좋아합니다. b 나는 it isn't well-supported 때문에 그것을 사용하지 않을 ut. 우리가 특정 화면 크기를 갖는 같은 모바일 장치를 정의하는 경우

, 나는 같은 것을 할 것입니다 :

$(function() { 
    var mobile = ($(window).width() < 481); 
    $('#image-gallery').find('a').click(function (e) { 
     if (mobile) 
      e.preventDefault(); 
    }); 
});

을 그러나, 나는 뭔가 다른, 예를 들어 같은 '모바일'정의하려고 할 것은 터치 이벤트를 지원하는 브라우저입니다.

출처

2012-07-17 20:01:55

왜 downvote? –

CSS를 사용하는 iOS 장치에 대한 링크 사용 안 함

답변

관련 문제