Modernizr을 사용하여 터치 장치 용 스타일 시트 만로드하려고 시도합니다.

Modernizr의 터치 테스트는 페이지를 볼 때 터치 또는 멀티 터치가 가능한지 테스트하는 가장 좋은 방법 중 하나라고 들었습니다.Modernizr을 사용하여 터치 장치 용 스타일 시트 만로드하려고 시도합니다.

터치 기능이있는 경우에만 스타일 시트를로드하기 위해 modernizr의로드 기능뿐 아니라 터치 테스트를 사용하려고합니다.

그러나 내 코드가 작동하지 않는 것 같습니다. 내가 도대체 뭘 잘못하고있는 겁니까?

<script type="text/javascript"> 
Modernizr.load({ 
    test: Modernizr.touch, 
    yep: 'assets/css/touch.css' 
}); 
</script>

업데이트 : 미안 해요, 난하지-작업이 무엇을 의미하는지 명확히해야 : 내 멀티 터치 스마트 폰에 페이지를 방문하면 스타일이 적용되지 있습니다 . 일반 스타일 시트에 스타일을 적용했는데 효과가 있지만 touch.css로 전환 한 다음 Modernizr로 조건부로로드하려고하면 작동하지 않습니다. Modernizr의 사본에는 yepnope 및 터치 테스트가 포함되어 있습니다. 나는 그들이 작업하고있는 다른 인스턴스에서 두 가지를 모두 사용하고 있습니다.

출처

2013-03-31 IMUXIxD

_ "작동하지 않는 것 같습니다"_ 무슨 뜻입니까? 콘솔에서 오류가 발생합니까? __Modernizr__의 빌드에는 __yepnope__가 포함되어 있습니까? – Mathletics

@Mathletics 질문에 대한 답변으로 질문을 업데이트했습니다. – IMUXIxD

스크립트 블록이 올바르게 보이므로 문제가 다른 것일 수 있습니다. 당신이 당신의 Modernzr 빌드 Yepnope을 포함 특정이기 때문에, 여기에 몇 가지 추측은 다음과 같습니다

스크립트 블록이 Modernzr

는 CSS에 대한 경로를 포함한 스크립트 태그 앞에 오는

나는 것 잘못 .load() 문에 callback: function(){ alert('loaded!'); }을 추가하여 시작하는지 확인하십시오. 그렇지 않다면 Modernzr.touch을 true으로 바꾸고 대신 데스크톱 브라우저에서 테스트하여 Javascript 오류가 발생했는지 확인하십시오.

출처

2013-03-31 22:38:28

좋은 제안, 또 다른 테스트는 다른 상황에서로드 될지 확인하기 위해 'nope'에 CSS를 넣는 것일 수 있습니다. – thaJeztah

그래, 그것은 또한 현재의 테스트가 그 장치에서 어떤 이유로 실패 할 가능성을 배제 할 것이다. –

재미있는 질문이지만, 질문에있는 정보를 기반으로 OP *는 그가 무엇을하는지 알고 있습니다. 지금은 컴퓨터 뒤에 있기 때문에 자신을 테스트 할 수 없습니다. 결과에 관심이 있습니다. – thaJeztah

또 다른 해결책은 터치 지원 장치에 대한 추가 스타일 시트를로드하지 않고 대신 <body>에 클래스를 추가하는 것입니다.

과 같이 :

if(Modernizr.touch) { 
    $('body').addClass('touch'); 
}

그리고이 .touch와 스타일 시트 클래스를 앞에 : 여분의 스타일 시트를로드

이

a:hover { 
    color: red; 
} 


a, .touch a:hover { 
    color: blue; 
}

touch 용 CSS의 많은과 상당한 차이가있을 때 좋은 생각이다 비 터치 장치. 이 경우 하나의 스타일 시트 만 사용하는 것은 좋은 아이디어가 아닙니다. 크기가 상당히 커질 것이기 때문입니다. 사소한 차이점이있는 경우 .touch 클래스를 본문 (또는 다른 요소)에 추가하는 것이 더 좋은 방법입니다.

출처

2013-04-04 07:05:41 Sebastian

Modernizr을 사용하여 터치 장치 용 스타일 시트 만로드하려고 시도합니다.

답변

관련 문제