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

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

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

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

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

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

CATEGORY

POPULAR POSTS

PAGE TOP