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

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

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

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

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

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

CATEGORY

POPULAR POSTS

PAGE TOP