タッチデバイスでだけ効くcssを書く方法

最終更新日から1年以上過ぎています。
内容が古くなっている可能性もあるのでご注意ください。

「スマホやタブレットでだけ効かせたいCSS」があるとき、皆さんどうしてますか？
media-queryでブラウザ幅が一定以下になった時にCSSを分けてる人がほとんどかと思うのですが、それだとどうしてもカバーしきれないケースってあると思います。

というのも、最近のタブレットってめちゃくちゃでかいんですよね。
第7世代の10.2インチは横向きで見るとwidth1080px。私がイラストの仕事(と落書きとゲームと…)で使ってるipad Pro 12.9は縦置きでも1024pxあります。

デッッッカ

1024pxってもうPCじゃないですか…？
正直体感的にはmin-width900pxくらいまではPCレイアウトでいきたい気がします。
でもタブレットで見た時はやっぱりヘッダナビがPCレイアウトだと微妙なんですよねえ…。

まあ、12.9インチのタッチデバイスを持ってる人、しかもそれでwebを見る人がどのくらいいるんだって話はおいといて、「画面幅に囚われず “タッチ型デバイスの時だけ” 作用するCSS」を書く手段があればコーディングの幅が広がると思い、ちょっと考えてみました。

なるべく運用しやすい方法でね！ズボラなので…

結論：headでデバイス判定してhtmlにclassをつけよう

最近私は、テンプレ的にhead内にこんな記述を入れています。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
      <script>
        const html = document.getElementsByTagName('html');
        if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
          html[0].classList.add('touch-device');
        }
      </script>
・・・

5-10行目に書いたスクリプトで「ユーザーエージェントを取得し、iOSもしくはAndroid Mobile系だった場合はhtmlタグにclass=”touch-device”を付与」しています。

あとはもうカンタンです。media-queryと同じ感覚でこのタグを利用してCSSを書くだけ。

style.css

html.touch-device {
    color: red; //タッチデバイスの時だけ文字が赤くなる
}

Sassを使っていればセレクタの中でも使えてさらに気軽。

style.scss

.selector {
    html.touch-device & {
        color: red; //タッチデバイスの時だけ.selectorの文字が赤くなる
    }
}

これ、めっちゃいいのでぜひお使いください。
Javascriptで読み込むCSSを切り替える記事とかはあったんですが、CSSを2つ作るのはちょっとイヤ(運用がめんどくさい)、Javascriptから直接styleをいじるのはもっとイヤ(書くのがめんどくさい)そんな超ズボラな私でもテンション爆上げで楽しくCSSが書けています。