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

度々書いているバッドノウハウっぽい内容ですが、今回も表示はできたので記録として記事にします。

万が一にも同じ状況の方がいた時のためのヒント的なものなればいいなと。

前提

対象は、WordPressでレスポンシブの設定があるサイト。フレキシブルレイアウトで、600pxあたりを境にMedia Queriesの設定でサイドが下に落ちるという感じです。この600pxが曲者で、600以上のタブレットデバイスでは横が切れてしまいます。

実現したいのは、

「スマートフォンはサイドを落とす」

で、

「タブレットはサイドを落とさずぴったりフィット」

でした。

なお、固定幅だけのサイトであればviewportのwidthを以下のように設定すれば画面にフィットします。

<meta name="viewport" content="width=1000px" />
<!--固定幅1000pxの場合-->

しかし、これではスマートフォンで見た際にサイドが落ちずMedia Queriesの意味がありません。

そこで、viewportを画面サイズで出し分けられないかと考えた次第です。

viewportを画面サイズで出し分ける

文字で説明するよりはコードをご覧頂いた方が早いと思いますので以下に記載します。

<?php if(wp_is_mobile()) :?>
<script type="text/javascript">
if (screen.width <= 768) {
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0"  />');
} else {
document.write('<meta name="viewport" content="width=1000" />');
}
</script>
<?php else : ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php endif ;?>

wp_is_mobile関数で分岐させていますが、今回はできる限りタブレットだけを狙いたかったためにつけています。

適当な名前を付けて（仮でexample.phpとします）上記の内容でファイルを作成し、これをhead内のmetaの場所で読み込ませます。

<meta name="robots" content="">
<?php include (TEMPLATEPATH . "/example.php"); ?>//パスは構成に合わせて変更
<meta name="keywords" content="" />
<meta name="description" content="" />

viewport変更のタイミング

ちなみに、ダメ元で試した方法としてjQueryによるviewportのwidthを書換える方法がありました。結果は失敗。理由は単純で、おそらく元々のviewportの設定が効いた後に書き換えるからだと思われます。

つまり、viewportのmeta自体が表示される前に分岐させなければなりません。

viewportは表示された時に計測されて反映されるので、後でcontentの値だけを書き換えても意味がないのですよね…。

結び

表示速度やファイルの扱いなどいろいろと問題ありそうですが、とりあえず「形にする」という目的は達成できました。

タブレットでは画面にフィットさせつつ、スマートフォンではサイドを落とす方法としてもっとバッドでないやり方があると思うのですが、まだ見つけられていません。

補足

サイトの構造を自体を見直すのが本道かとは思いますが、今回はそれをしない手段を探していました。

今後デバイスの変化でメジャーなサイズが変わるたびに大掛かりな修正するのは厳しいのと、単純に「このサイズまでは画面にフィット。それ以下のサイズはサイドを落としてリキッドに。」のような分岐点の再調整がしやすい作りの方が良いのではという考えもありました。

追記

もう少しシンプルにして、かつlink要素のstylesheetにも対応した方法を記事にしています。詳細は以下をご覧ください。

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