Nuxt.jsでhover/activeのレスポンシブ対応

一般的にWebアプリではクリックできることを示すために要素に :hoberを付けます。
モバイル版のアプリではマウスがないため、長押しをした際に :hoverのような変化を付けるとタップ(クリック)できることが伝わるかと思います。これはTwitterなど多くのアプリに見られる実装です。

この動作を実装したのでおこなったことをまとめます。

hover/activeの仕様

PCの :hover

Mobileの :hover

これではmobileで長押し後、別の場所をタップするまで :hoverで設定したCSSが続いてしまいます。
これは想定している動作ではありません。

PCの :active

mobileの :active

mobileはいいのですが、PCではクリックしないと適用されませんでした。

なので、

• PCでは :hover
• mobileでは :active

とする必要があります。

デバイスを判別する

nuxt-user-agentというパッケージでユーザーのデバイスを判別し、対応するCSSを適用することにします。

github
https://github.com/fukuiretu/nuxt-user-agent

nuxt-user-agentをgithubのREADMEに従ってNuxtにインストールし、PCとmobileの判別をしていきます。

先ほどの例に導入したものがこちら

<template><divclass="card-container"><divclass="card":class="{
        'card-pc': $ua.deviceType() === 'pc',
        'card-mob': $ua.deviceType() !== 'pc'
      }"
    >
      Sample
    </div></div></template><stylelang="scss"scoped>.card-container{display:flex;justify-content:center;}.card{width:80%;height:200px;background:white;border:1pxsolidblack;border-radius:10px;display:flex;justify-content:center;align-items:center;font-size:20px;&-pc{&:hover{background:#78c4db;}}&-mob{&:active{background:#78c4db;}}}</style>

これで

• PCでは :hover
• mobileでは :active

を実装することができました。

以下のように画面サイズで判別することも可能ではあります。

@media screen and (min-width: PhoneSize) { 
  &:hover {
    background: #78c4db;
  }
}

ただしiPad Pro等の大型タブレットまで考慮すると難しくなってしまうので、今回はデバイスを取得する実装になりました。