BLOG

メディアクエリでhoverが使えるデバイスかどうか

| HTML / CSSJavaScript

タブレットで、hoverのためにどうさの不具合が出るときがありませんか。
プルダウンとか、ボタンとか、ホバーしないと表示されないとか2回タップしないといけないとかなにかと面倒なことがあったります。
そこで、cssでhoverが使えるかの判定をしてできる場合は使うとしても
プルダウンの場合はやっぱり、javascriptを使うのがいいと思います。

ってことで、今回はcssとjavascriptでhoverが使えるデバイスかどうかを判定する方法のメモです。

CSS

@media (any-hover:hover) {
}

例えば、こんな感じにつかえるかな?

@media (any-hover:hover) {
  transition: opacity .5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;

  &:hover{
    opacity: .7;
  }
}

hover関連のtransitionとhoverの指定は @media (any-hover:hover) で指定しちゃうのが吉かなと思います。

JavaScript

const isHover = window.matchMedia("(any-hover:hover)").matches;
if(isHover){
}

JavaScriptの場合はcssをほぼそのままですね。
判定用のトリガーつくってあとはifでやっちゃうといいと思います。

const isHover = window.matchMedia("(any-hover:hover)").matches
if(isHover){
  elm.onclick = () => {
    if(elm.classList.contains('is-active')) elm.style.height = '100px'
    else elm.style.height = ''
    elm.classList.toggle('is-active')
  }
}

簡易的ですが、こういうイメージです。ホントはスマホとの判定で window.matchMedia(‘(min-width: 768px)’).matches をうまくつかってください。
hoverが使えないデバイスのときは、タップでプルダウンを表示させるみたいなイメージですね。

タブレットで見る方がこれから増えていくと思うので頭の霞にでもおいても損はないかなと思います。

RECENT POSTS

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

CATEGORY

POPULAR POSTS

PAGE TOP