… 자바스크립트에서는?
모바일이 아니라, 예를 들어 태블릿 같은 터치 디바이스처럼 호버(hover)가 의미가 없는 모든 장치를 말하는 거예요.
아니면 CSS를 사용해야 하나요?
고려해야 할 까다로운 부분 중 하나는 터치스크린이 탑재된 노트북입니다. 이 경우, 장치가 기술적으로 터치스크린을 갖추고 있더라도 주요 인터랙션은 마우스를 통해 이루어지는 경향이 있습니다. 최근에는 리액션(반응) 기능에서 이 문제로 인해 몇 가지 어려움이 있었습니다 
다만, 질문하신 구체적인 내용에 대해 말씀드리자면, CSS 미디어 쿼리를 사용하는 것이 적절하다고 생각합니다. hover, pointer, any-hover, any-pointer를 사용할 수 있습니다.
그리고 다음과 같이 window.matchMedia를 사용하여 JS에서 이러한 CSS 미디어 쿼리를 실행할 수 있습니다:
네, 좋은 지적이네요. 좋은 제안도 감사드립니다.
저는 테마 설정을 이용해 어떤 미리보기 텍스트가 이미지 위에 표시될지를 결정하려고 했거든요. 해당 이미지는 보통 호버(hover) 시에만 표시되게 되어 있습니다.
제 경우를 보면 옵션은 다음과 같습니다:
- 항상 표시
- 터치 디바이스에서만 표시 (태블릿/휴대폰에서는 호버가 사실상 불가능하기 때문)
- 호버 시에만 표시 (일반적인 경우)
이 경우 터치 디바이스를 오인식하더라도 큰 문제는 되지 않을 것 같습니다
혹시 제가 놓친 직접적인 Site 속성이 있는지 기대하고 있었지만, 제안해 주신 방법을 살펴보겠습니다. 다만 concatClasses를 사용한 미니 CSS 리팩토링이 필요할 것 같네요 …
capabilities 서비스에 도움이 될 수 있는 속성들이 있습니다. 예를 들면:
다만 참고할 점: 이 로직 때문에 최근 우리가 꽤 고생을 했습니다. 머지않아 이를 css-media-query 기반 전략으로 대체할 것으로 예상됩니다. (이 코드가 작성될 당시에는 해당 미디어 쿼리가 널리 사용되지 않았습니다.)
오, 은밀한 서비스네요… 소스에서 그렇게 많이 본 적은 없어요! 