Modernizr and CSS -이 규칙이 적용되지 않은 이유는 무엇입니까?

저는 Modernizr을 사용하고 있으며, -no-touch를 사용할 수있는 경우 Google지도를 사용하고 싶습니다. .touch가 사용 가능할 때 정적 맵을 사용하십시오. 그래서 같이 :Modernizr and CSS -이 규칙이 적용되지 않은 이유는 무엇입니까?

.no-touch #map-canvas { 
    height: 400px; 
} 

.touch #map-canvas-static { 
    height: 300px; 
    background-image: url('http://maps.googleapis.com/maps/api/staticmap?center=63.439016,10.416856&zoom=15&format=png&sensor=false&size=1583x1583&maptype=roadmap&style=element:geometry|saturation:-71&style=feature:water|saturation:-2|color:0x768080|lightness:34&markers=63.439114,10.415564&&scale=1'); 
    background-position: center; 
}

HTML 마크 업이 같이 간단하다 :

<section id="map"> 
    <div id="map-canvas-static"></div> 
    <div id="map-canvas"></div> 
</section>

가 어떤 이유는 왜 작동하지 않을까요?

내 데스크톱 컴퓨터에서 정상적으로 작동합니다. 그러나 아이폰에서 나는 그것을 테스트하고있다. 브라우저가 터치를 반드시 터치 스크린 장치를 반영하지 않습니다 이벤트를 지원하는 경우

출처

2013-08-23 Kenny Bones

Modernizr 특정 클래스가 없어도 작동합니까? 그렇다면 Modernizr을 설정하는 방식에 문제가 될 수 있습니다. – Xareyo

Modernizr.touch 시험에만 나타냅니다. 예 : 의 경우 Palm Pre/WebOS (터치) 전화는 터치 이벤트 을 지원하지 않으므로이 테스트는 실패합니다. 또한 크롬 (데스크톱)은 이것에 대한 지원에 대해 을 거짓말하는 데 사용되었지만 이후에는 수정되었습니다. Modernizr도 미디어 쿼리를 통해 멀티 터치 지원을 테스트합니다. 은 Firefox 4에서 Windows 7 태블릿을 노출하는 방식입니다. 자세한 내용은 Modernizr 터치 테스트를 참조하십시오.

이 하이브리드 장치에 대한 수용에 함께 모두 터치 및 마우스 이벤트를 설정하는 것이 좋습니다 - 터치를 참조 마우스 HTML5는 기사를 흔든다.
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
     $(body).addClass('.touch') 
    } 
을 그리고 당신은 당신의 CSS 코드를 사용할 수 있습니다 : 제 생각에는

http://modernizr.com/docs/#touch , 그렇게 같은 모바일 장치를 감지하는 간단한 자바 스크립트를 사용할 수 있습니다.

출처

2013-08-23 11:59:17 psd2htmldepot

캐시 문제만큼이나 단순한 경험이있는 것처럼 보입니다. 지금은 시크릿 모드를 항상 사용하는 법을 배웠습니다. 터치 및 마우스 이벤트를 함께 설정합니다. 또한, modernizr.touch에 대한 귀하의 의견이 반드시 터치 스크린 장치를 반영하는 것은 아니며, Modernizr에는 그런 종류의 수표가 있습니까? 귀하의 샘플 코드와 같은? –

Modernizr는 장치에 대해 아무 것도 말하지 않고 브라우저 만 알려줍니다. 터치 이벤트를 지원하지 않는 브라우저를 실행하는 터치 스크린 장치가 있습니다. 터치 이벤트를 지원하는 브라우저를 실행하는 터치 스크린이없는 장치가 있습니다. – psd2htmldepot

Modernizr and CSS -이 규칙이 적용되지 않은 이유는 무엇입니까?

답변

관련 문제