0%

last updated 2021.06.07

develop

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

「スマホやタブレットでだけ効かせたい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が書けています。

ただし弱点はある (けど些細)

この手法の弱点というか、Javascriptでタッチデバイス判定する手法自体の弱点なんですが、判定に使っている条件記法がいつか破綻するかはわかりません。

いつか突然、AppleやAndroidがユーザーエージェントの記法を変えてくるかもしれないですし、黒船的にまったく新しい第三のタッチデバイスOSが現れるかもしれません。セキュリティ的な問題とかが持ち上がってそもそもユーザーエージェントがjsで取得できなくなる日だってくるかも。

ただまあ、そんなことを言い出したらキリがないので!
webをやると決めた日から、過去に作ったもののメンテナンスとは永遠に付き合う運命です。なるべく状況に流されない「本質的な開発」を心がけつつ、状況が変わったら変わった時にまた考えましょう。

ちなみに私はこれ以外にも、no-jsやらloadingやら、とにかくjsで判定してはhtmlさんにclassをつけまくっています

あなたの制作が楽になる情報が提供できてたら幸いです。
それでは、お互いハッピーweb制作体験を。

recommend

develop / 2021.05.09

svgの縦横比を可変にする
svg