WordPressにてviewportとcssを画面サイズで出し分ける

以前試した「WordPressにてviewportを画面サイズで出し分ける」の記事からコードを直しつつ、更に進めてcssまで対応したものを作ってみました。

動作はしているのですが、少し不安な部分もあり。

実現したいこと

実現したいことは以下の通りです。

• viewportとcssをタブレットより小さいときだけ変える
• 画面サイズで判定して出し分ける

なお、今回はリサイズは考慮にいれませんが、最初からwp_is_mobile()で分岐させてコードを実行することでPCでは動作しないように意図しています。

コード

早速本題に。以下のコードで実現可能です。

<script type="text/javascript">
 var meta = document.createElement('meta');
 var link = document.createElement("link");
 meta.setAttribute('name', 'viewport');
 link.rel = "stylesheet";
 if (screen.width <= 767) {
  meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
  link.href = "<?php echo get_template_directory_uri(); ?>/mobile.css";
 } else {
  meta.setAttribute('content', 'width=960');
  link.href = "<?php echo get_template_directory_uri(); ?>/style.css";
 }
 document.getElementsByTagName('head')[0].appendChild(meta);
 document.getElementsByTagName("head")[0].appendChild(link);
</script>

結果は以下の通りです。

• 767pxより大きければ、固定幅のviewportでstyle.cssを出力
• 767px以下であれば、デバイス幅のviewportでmobile.cssを出力

あとは、wp_is_mobile()で分岐させた中にコードを書けば実現できます。

なお、今回の参考サイトは以下のとおりです。

• viewport の指定を JavaScript で行う
• JavaScriptによって動的に CSSを追加する場合のブラウザごとの挙動の違い
• JSの中にPHPって書けるのね

JavaScriptの中にWordPressのテンプレートタグ、といいますかphpが書けることを知りませんでした。

スタイルシートのパス

JavaScriptの中にphpを書くことに問題はないのかが気になるのですが、使用箇所がWordPressに限られているのでテンプレートタグに関しては許容できるのかなぁと考えています。

もちろん、サイトに合わせてパスをそのまま書き込めば悩む必要はありません。

UAでの分岐と画面サイズで分岐

UAでの分岐であれば、funcitons.phpに分岐用の関数をつくることで簡単に実現可能です。
しかし、当然登録したUAでしか分岐できません。

今後機種が増えたりバージョンが上がった結果、UAが増えたり変わったリした場合にはコード自体に追加せねばなりません。

その点、画面サイズでの分岐であればメンテはいりませんので(画面サイズ計測の仕組みが使えないものはアウトですが)、長期運用時のメリットがあるかと考えています。

メディアクエリはこの点が非常に優れていると思っていますが、metaはメディア属性対象外なのが残念です。もっとも、IE下位の問題もありますのでどうしようもありませんが。

wp_is_mobile()関数も同じではないか、といわれれば確かにそうなのですが、そこはWordPressの頻繁なバージョンアップが問題を解決してくれます。

結び

viewportとstylesheetだけならこれでもよいかなと思いましたが、諸般の事情によりお蔵入りとなりそうです。