장치가 터치스크린인지 감지하는 미디어 쿼리
미디어 쿼리를 사용하여 터치스크린 장치에 없을 때 어떤 일이 일어나도록 하는 가장 안전한 방법은 무엇입니까?면,하십니까 같은 하는 것을 요?!window.Touch아니면 모더니즈?
CSS4 미디어 쿼리 초안에는 실제로 이에 대한 속성이 있습니다.
'포인터' 미디어 기능은 마우스와 같은 포인팅 장치의 존재와 정확성을 쿼리하는 데 사용됩니다.장치에 여러 입력 메커니즘이 있는 경우 UA에서 기본 입력 메커니즘 중 가장 기능이 없는 포인팅 장치의 특성을 보고하는 것이 좋습니다.이 미디어 쿼리는 다음 값을 사용합니다.
. -다.
합니다. -합니다.
-합니다
이는 다음과 같이 사용됩니다.
/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}
크롬 프로젝트에서도 이와 관련된 티켓을 찾았습니다.
브라우저 호환성은 Quicks 모드에서 테스트할 수 있습니다.결과는 다음과 같습니다(2013년 1월 22일).
- 크롬/윈 : 웍스
- 크롬/iOS: 작동하지 않음
- 사파리/iOS6: 작동하지 않음
요즘에는 CSS 미디어 쿼리를 사용하여 특정 대화형 기능을 가진 장치에 대한 스타일을 정의할 수 있으며 널리 지원됩니다.
예를 들어 호버(hover)는 사용자의 기본 입력 메커니즘이 요소 위를 호버(hover)할 수 있는지 여부를 테스트하는 데 사용될 수 있습니다(에뮬레이트가 없는 터치 지원 장치에서는 해당되지 않습니다).
@media (hover: none) {
a {
background: yellow;
}
}
다른 상호작용 테스트는 포인터, 애니포인터, 호버 및 애니호버입니다.
기답
modernizr을 사용하고 미디어 쿼리 기능을 사용하는 것을 제안합니다.
if (Modernizr.touch){
// bind to touchstart, touchmove, etc. and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc.
}
그러나 CSS를 사용하면 파이어폭스와 같은 유사 클래스가 있습니다.:-moz-system-metric(터치 가능)을 사용할 수 있습니다.그러나 이러한 기능을 모든 브라우저에서 사용할 수 있는 것은 아닙니다.
Apple 기기의 경우 다음을 간단히 사용할 수 있습니다.
if (TouchEvent) {
//...
}
특히 iPad의 경우:
if (Touch) {
// ...
}
하지만 안드로이드에서는 작동하지 않습니다.
Modernizr는 특징 탐지 기능을 제공하며, 특징을 탐지하는 것은 브라우저를 기반으로 코딩하는 것이 아니라 코딩하는 좋은 방법입니다.
스타일링 터치 요소
Modernizer는 이러한 정확한 목적을 위해 HTML 태그에 클래스를 추가합니다.에는.touch그리고.no-touch에 .다와 앞에 .할 수 .touch .your-container. Credits: Ben Swinburne
CSS 솔루션은 2013년 중반 현재 널리 사용되지 않는 것으로 보입니다.대신에...
Nicholas Zakas는 Modernizr가 다음과 같이
no-touch브라우저가 터치를 지원하지 않을 때 CSS 클래스.또는 간단한 코드 조각으로 자바스크립트에서 탐지하여 자신만의 Modernizr와 같은 솔루션을 구현할 수 있습니다.
<script> document.documentElement.className += (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch'); </script>그러면 CSS를 다음과 같이 쓸 수 있습니다.
.no-touch .myClass { ... } .touch .myClass { ... }
이에 대한 미디어 쿼리가 실제로 있습니다.
@media (hover: none) { … }
파이어폭스 외에도 꽤 잘 지원되고 있습니다.사파리와 크롬은 모바일 기기에서 가장 일반적인 브라우저이며, 더 많이 채택될 때까지 충분할 것입니다.
미디어 유형에서는 표준의 일부로 터치 기능을 감지할 수 없습니다.
http://www.w3.org/TR/css3-mediaqueries/
따라서 CSS나 미디어 쿼리를 통해 지속적으로 수행할 수 있는 방법은 없으며 자바스크립트에 의존해야 할 것입니다.
Modernizr를 사용할 필요 없이, 그냥 평범한 자바스크립트를 사용하면 됩니다.
<script type="text/javascript">
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device) alert("touch is enabled!");
</script>
2017년에도 두 번째 답변의 CSS 미디어 쿼리는 여전히 파이어폭스에서 작동하지 않습니다.해결책을 찾았습니다. -모즈 터치가 가능합니다.
다음은 크로스 브라우저 미디어 쿼리입니다.
@media (-moz-touch-enabled: 1), (pointer:coarse) {
.something {
its: working;
}
}
이거면 돼요.만약 그것이 나에게 알려주지 않는다면,
@media (hover: none) and (pointer: coarse) {
/* Touch screen device style goes here */
}
hover:hover가 지원되지 않을 때 none이 참입니다.
pointer:coarse는 입력의 정확도가 제한적일 때 참입니다.
호버를 제어하는 것만 원하는 경우 포인터를 사용할 필요가 없습니다.
edit: 주문형 호버가 더 이상 지원되지 않습니다.
이 솔루션은 CSS4가 모든 브라우저에서 전 세계적으로 지원될 때까지 작동합니다.그 날이 오면 CSS4를 사용하기만 하면 됩니다. 하지만 그 때까지는 현재 브라우저에서 사용할 수 있습니다.
브라우저- util.js
export const isMobile = {
android: () => navigator.userAgent.match(/Android/i),
blackberry: () => navigator.userAgent.match(/BlackBerry/i),
ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
opera: () => navigator.userAgent.match(/Opera Mini/i),
windows: () => navigator.userAgent.match(/IEMobile/i),
any: () => (isMobile.android() || isMobile.blackberry() ||
isMobile.ios() || isMobile.opera() || isMobile.windows())
};
로드 중:
옛날 방식:
isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;
새로운 방법:
isMobile.any() ? document.body.classList.add('is-touch') : null;
위 코드는 장치에 터치 스크린이 있는 경우 "is-touch" 클래스를 본문 태그에 추가합니다.웹 수 에서 CSS치:hover다를 할 수 .body:not(.is-touch) the_rest_of_my_css:hover
예를 들어 다음과 같습니다.
button:hover
다음이 됩니다.
body:not(.is-touch) button:hover
이 솔루션은 모던라이저 lib가 매우 큰 라이브러리이기 때문에 모던라이저를 사용하지 않습니다.터치 스크린을 감지하는 것만 시도하는 경우 최종 컴파일된 소스의 크기가 요구 사항일 때 이 방법이 가장 좋습니다.
CSS로 터치 스크린을 쿼리하는 더 나은 방법은 (2022년) 다음과 같습니다.(pointer:coarse), 그리고 절대 그렇지 않습니다.(hover:none), 또는 일부에서 제안하는 조합:(hover: none) and (pointer: coarse),왜냐면(hover:none)신뢰할 수 없음 - 일부 장치는 길게 누르기(터치)할 때 호버링을 에뮬레이트합니다.(hover:none)사실이 아닐 겁니다실제 터치 장치(에뮬레이션이 아닌 전화)에서 다른 입력(마우스 등) 없이 호버 기능을 "갖고" 미디어 쿼리가 실패하는 문제가 있었습니다.
아마도 가장 좋은 방법은 Modernizr를 사용하는 것일 것입니다. (Modernizr와 CSS는 테스트가 무엇을 하는지 보지는 않았지만 CSS와 동일할 수 있습니다.) 다음과 같습니다.
.modernizr-touch-class .my-class { // properties }
@media (pointer:coarse) { .my-class { // the same properties } }
하지만 대체적으로, 이것은 신뢰할 수 없는 것으로 여겨집니다.modernizr "Touch Events" 테스트를 추가하면 이 문제에 대한 짧은 정보(몇 개의 링크 포함)가 표시됩니다.이것은 아마도 특정한 문제에 대한 최선의 해결책을 찾기 위해 읽고 시험해 보는 것이 좋을 것입니다.
어쨌든, 저는 그냥 그 말을 하고 싶었어요.(hover:none)신뢰할 수 없습니다. :D
이것은 모질라 기반 및 웹킷 기반 브라우저에서 잘 작동합니다.
/* show only on mouse devices */
@media (hover: hover), (-moz-touch-enabled: 0), (pointer:fine) {
...
}
/* show only on touch devices */
@media (hover: none), (hover: on-demand), (-moz-touch-enabled: 1), (pointer:coarse) {
...
}
JS 또는 jQuery를 사용하여 클래스 터치스크린을 본문에 추가
//allowing mobile only css
var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
if(isMobile){
jQuery("body").attr("class",'touchscreen');
}
이것을 이용해서 이 문제를 해결할 수 있었습니다.
@media (hover:none), (hover:on-demand) {
Your class or ID{
attributes
}
}
2022년 5월 5일 기준:
var isTouch = "maxTouchPoints" in window.navigator && window.navigator.maxTouchPoints > 1;
var isTouchTwo = "ontouchstart" in window;
var isTouchThree = window.matchMedia && window.matchMedia("(pointer:coarse)").matches;
var isDesktopIE = !!window.MSInputMethodContext && !!document.documentMode && !isTouchTwo;
var uaDataIsMobile = window.navigator.userAgentData && window.navigator.userAgentData.mobile;
var isDevice = typeof uaDataIsMobile === 'boolean' ? window.navigator.userAgentData.mobile || (isTouchTwo && isTouchThree) : ((/android|avantgo|blackberry|googlebot-mobile|iemobile|opera mini|kitkat|palmos|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|iphone|ipod|phone|ipad|pie|tablet|silk|up\.browser|up\.link|playbook|webos|wos/i.test(window.navigator.userAgent.toLowerCase()) && !isDesktopIE) || window.navigator.platform === 'MacIntel' && isTouch);
console.log('1. '+isTouch+' 2. '+isTouchTwo+' 3. '+isTouchThree+' 4. '+/android|avantgo|blackberry|googlebot-mobile|iemobile|opera mini|kitkat|palmos|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|iphone|ipod|phone|ipad|pie|tablet|silk|up\.browser|up\.link|playbook|webos|wos/i.test(window.navigator.userAgent.toLowerCase())+' 5. isDevice: '+isDevice)
문제 해결, a) IE11 데스크톱navigator.userAgent문자열은 "태블릿(tablet)"이라고 주장하며, b) 여기서 iPad.사파리의 OS User Agent는 MacOS Catalina와 동일합니다. (내가 테스트하지 않았지만, 이 논쟁의 선을 따릅니다.
인용문
https://developer.apple.com/forums/thread/119186
어록이 없는
효과가 있을 겁니다의지하고 있습니다. (편집 참조)
참고로 제 답변은 클라이언트 힌트와 호환됩니다. (향후 답변도 그래야 할 것 같습니다.)를 지원하는 브라우저의 경우navigator.userAgentData, 필요 없을 겁니다navigator.userAgent.
긴 끈에 대해서는 미안합니다.ES6에서는 더 예뻐 보입니다.
미디어 쿼리를 수행하려면 참 또는 거짓 출력을 기준으로 스타일 시트를 첨부하면 됩니다.
edit: iOS 13 및 Up에서 iPad 및 iPad OS 버전을 감지하는 방법?
if (navigator.maxTouchPoints > 1) {
// browser supports multi-touch
}
저는 그런 줄 알았어요.> 0. (코드 수정됨)
여러 브라우저에서 다양한 옵션을 시도해보니 호버와 포인터를 모두 사용해야 합니다.
@media (hover:none), (pointer:coarse){
.show_on_touch {display:inline}
}
hover:none은 hover가 지원되지 않는다는 것을 알려주지만 일부 플랫폼의 브라우저는 있습니다.
그리고 포인터:course는 미세한 포인터 제어가 없기 때문에 손가락 기반일 수 있음을 알려줍니다.
언급URL : https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen
'programing' 카테고리의 다른 글
| PHP를 이용한 페이지 수정 방법 (0) | 2023.09.26 |
|---|---|
| 스프링 @RestController를 사용하여 HTTP 204를 null로 반환합니다. (0) | 2023.09.26 |
| 열의 기본값을 오늘 날짜로 설정하려면 어떻게 해야 합니까? (0) | 2023.09.26 |
| 테스트를 찾을 수 없음 - 베어본 Spring Boot Maven 프로젝트에서 jUnit 5 테스트 케이스를 실행할 때 테스트 제품군이 비었습니다. (0) | 2023.09.26 |
| MariaDB 10.0.17 그룹 커밋 복제 속도 (0) | 2023.09.26 |