터치 장치를 감지하는 명시적인 CSS 미디어 쿼리 방법이없고 터치 기능을 확인하기 위해 Modernizr 스크립트를 실행할 수 있음을 알고 있습니다.미디어 쿼리 : 터치 전용
그러나 미디어 쿼리 (방향 : 세로) 및 (방향 : 가로)를 사용하지 않아서 터치 장치를 분리 할 수없는 이유가 있는지 궁금합니다. 필자의 가정은 이러한 유형의 기능을 가진 터치 장치 만 있다는 것입니다.
방향을 사용하는 데스크톱/노트북/키보드 장치가 있습니까?
예 아니요 : orientation은 장치가 touch를 사용하는지 여부와 관련이 없으며, 방향이 무엇인지 확인하기 위해 뷰포트 너비와 높이를 사용합니다. (orientation: landscape)은 뷰포트의 너비가 너비보다 크면 적용되고 은 뷰포트의 너비가 너비보다 클 때 적용됩니다. 따라서 실제로 미디어 쿼리를 지원하는 모든 장치의 브라우저는 orientation을 사용합니다.
stackoverflow answer 양식을 확인하십시오. 브라우저 창의 크기를 조정할 때 방향 미디어 쿼리가 적용됩니다. 부록으로
, 당신은 the modernizr docs에서이 인용을 알고 있어야합니다 브라우저가 터치를 반드시 터치 스크린 장치를 반영하지 않습니다 이벤트를 지원하는 경우 는Modernizr.touch 시험에만 나타냅니다. 예 : 의 경우 Palm Pre/WebOS (터치) 전화는 터치 이벤트 을 지원하지 않으므로이 테스트는 실패합니다. 또한 크롬 (데스크톱)은 이것에 대한 지원에 대해 을 거짓말하는 데 사용되었지만 이후에는 수정되었습니다. Modernizr도 미디어 쿼리를 통해 멀티 터치 지원을 테스트합니다. 은 Firefox 4에서 Windows 7 태블릿을 노출하는 방식입니다.
에서는 아직도 당신이 무슨 일을하는지에 적합 할 수 있다고 말했다 가졌어요. 그게 당신에게 달려 있습니다
아, 알 겠어! 이 예제를 제공해 주셔서 감사합니다. 그러나 나는 부정적인 조건을 사용하고 있으며 모바일 및 태블릿 장치를 감지하기 위해 예상 결과를 얻는 것 같습니다. 이 사실이 너무 좋습니까? http://jsfiddle.net/foomarks/vP76n/ –
불행히도, 그렇습니다. "not"키워드는 전체 미디어 쿼리에 적용되며 그렇지 않으면 미디어 쿼리가 false를 반환하면 true를 반환합니다. not 키워드는 개별 기능 쿼리를 무효화하는 데 사용할 수 없으며 전체 미디어 만 무효화 할 수 있습니다 query "([source] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#not)). 두 번째 미디어 쿼리는 '화면 만 (최소 너비 : 361px), 모두, 모두'로 해석됩니다. 따라서 기기에 관계없이 320px에서 빨간색 배경이 361px까지 나타날 것이며 파란색 배경을 볼 수 있습니다. –
해명 해 주셔서 감사합니다. –
예, 모든 장치는 브라우저 창 크기를 조정하여 방향을 변경할 수 있습니다. 이를 위해 자바를 사용하여 body 태그에 class을 추가하기 만하면됩니다.
[장치가 터치 스크린인지를 감지하는 미디어 쿼리] 가능한 복제본 (http://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen) – chimos