メディアクエリだけでモバイルデバイスを判定する

デバイスを判定する方法として、UAから判断したりUAparser.js などのライブラリを使う方法がありますが、とにかくモバイルかどうかだけを判定したい時に、ライブラリを読み込んだりするのもどうなのか。と思っていた時に、発見した方法がメディアクエリを利用する方法

参考：
https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134

CSSの2つのフィーチャーを使う

それは Hover と Pointer

hover

ポインティングデバイスが要素のhoverをサポートしているかをチェックすることができる

pointer

ポインティングデバイスを持っているか、もしそうならば、主要なポインティングデバイスにどれだけの正確性があるかを調べる

この二つを組み合わせることで、モバイルデバイスを判定することができる

/** mobile 判定 **/
@media screen and (max-width: 640px) and (hover: none) and (pointer: coarse) {
  .some-classname {
    display: none;
  }
}

とてもシンプル。
Javascript側で使いたいときは、window.matchMediaを使う

/** mobile判定 */
function isMobile() {
  return (window.matchMedia("(hover: none) and (pointer: coarse)").matches)
}

Androidが判別できない

上記だけでは、Androidが判別できない。
Androidでサポートされていないqueryのようで、判定できない様子

結局のところ UAで判定するしかないのだろうか...

function isMobile() {
  return (window.matchMedia("(hover: none) and (pointer: coarse)").matches) ||
         (navigator.userAgent.indexOf('Android') > 0)
}