WordPressのCSSレスポンシブデザインを「is_mobile」で実現する

たぶんこれはすごく異端児な方法で、ネット上を検索してみてもやっている人なんていなかったので参考になるかは分からないけど、とりあえず僕は今これで落ち着いているので備忘録も兼ねて。考えられるリスクとかも軽く後述します。

やったこと

メインのスタイルシートにレスポンシブデザイン、主にメディアクエリでの条件分岐をやっていると、恐ろしくめちゃくちゃなことになっていくので保守性は最悪な上、なによりしっかりPCとスマートフォンを分けることが信じれないくらい面倒なので、WordPress標準で用意されている「wp_is_mobile」を使ってキッパリ分けた。

「wp_is_mobile」はタブレットもスマートフォン側に含まれてしまうため、実際に使うのはそれを改変させた「is_mobile」という自作関数である。

ググればその辺にどれも同じものが転がっている。
これね。↓

function is_mobile() {
  $useragents = array(
    'iPhone',          // iPhone
    'iPod',            // iPod touch
    'Android',         // 1.5+ Android
    'dream',           // Pre 1.5 Android
    'CUPCAKE',         // 1.5+ Android
    'blackberry9500',  // Storm
    'blackberry9530',  // Storm
    'blackberry9520',  // Storm v2
    'blackberry9550',  // Storm v2
    'blackberry9800',  // Torch
    'webOS',           // Palm Pre Experimental
    'incognito',       // Other iPhone browser
    'webmate'          // Other iPhone browser
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

背景

そもそもメディアクエリは「画面幅などを判断して処理を分岐させる」というその性質上、全てのユーザー環境に完璧に備えることがほぼ無理である。

そしてさらに輪をかけてやっかいなのは、言わずもがなRetinaを始めとする最近の高解像度ディスプレイの登場だよね。「今までと同じ倍率で表示すると小さくなっちゃうから占有するピクセル数を2^x倍してます（やや意訳）」とかいうおせっかい仕様のおかげでメディアクエリの分岐は超めんどくさいことになる。

これに気付いたと同時に問題視し始めたきっかけは4Kディスプレイを導入したときで、今までスマホ用の分岐に使っていたメディアクエリの文が全部4Kディスプレイで反応してしまっていて、しっちゃかめっちゃかなことになっていた。

自分が持っていない環境だとなかなかユーザーのことを想定できないという大変貴重な体験になりました。

そんなわけで、単純な画面幅だけでの対応だけではなく素直に端末の種類を判定させたいだけっていうのも煩わしいというのが現状。

でも僕がなにも知らないだけで普通になんとかなる方法が99%くらいの確率で存在している可能性があるのでどなたか教えてください（泣）
→2019/11/8追記：結局今回なんでこの方法がダメだったかと言うと、「PCでもスマホでもHTMLソースが一切変わるべきではない」というレスポンシブの考え方に反していたからです。

嬉しいこと

• 端末の分岐が完璧に行える（上述のようにタブレットの扱いも自由です）
• 完璧に端末を分けたあとでちょちょっとメディアクエリを書けばいいので、想定されるパターンをほぼ全て網羅できる（スマホだったら横幅1000pxは有り得ないなとか）
• CSSの1ファイル分の記述量が圧倒的に減る
• CSSの保守性アップ（2つ分けたファイルの同じ場所に同じ内容があるので、同時に編集できてしかも場所も把握しやすい）

嬉しくないこと

• ほぼないけど、Googleに「レスポンシブデザインなCSSを書いていないね」って誤解される可能性がある（後述）

思いつくのはこれくらい。

Googleからのレスポンシブデザイン判定について

ここももちろん調べた上で実行したつもりです。

なにも「レスポンシブデザイン」の定義が「CSS内でメディアクエリとかをやっていること」ってだけではないようで、端末を判定したスタイルシート自体の読み分けもちゃんと「レスポンシブデザイン」として理解してくれるようです。

Google レスポンシブデザイン

レスポンシブ ウェブ デザイン（RWD）は、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定方法です。すべての Googlebot ユーザー エージェントがページとそのアセット（CSS、JavaScript、画像）をクロールできる状態であれば、Google のアルゴリズムによってこの設定が自動的に検出されます。

上記ソースの他にもどこかでなんかを読んだ気がするのだけど、思い出せなかった。あしからず。

しかも、仮にそうじゃなかったとしても前述したとおりそれぞれのCSS内でもメディアクエリは使用しているので「全くレスポンシブじゃないね、君！」とはならないと思っている。

諸々判断して大丈夫だろうというのが今の所の結論です。この状態を導入して2ヶ月くらいだけどアナリティクスやサーチコンソール、PageSpeed InsightsのようなGoogle系のツールにも何か指摘されたりはしていません。

さらには超どストレートにレスポンシブ的にOKかテストできるこれまたGoogleの「モバイルフレンドリーテスト」でもGOOD判定もらえています。

具体的な方法

function.phpでCSSを読み込む際に、if文の条件に「is_mobile」を使用して真ならスマホ用CSS、偽ならPC・タブレット用のCSSを読み込むだけ（実際には見てくれの順番的に、否定文にして真偽逆にしてます）。

まとめ

誰でも思いつきそうなのに誰もやっていないということは絶対なにかデメリットがあるんだと思っているんだけど、今の所それっぽいことが見つかっていなくて、「SEO的に大問題です」みたいな僕が常識知らずである可能性を知らしめるためにも今回こういう記事を書いてみました。

心優しい方、もしそのような点で思い当たる節がありましたらご教授ください…。

しかしもし万が一！！お役に立てましたらぜひシェアとかお願いしちゃったりします！！！

ありがとうございました～。