最近、改めてWordPress自作テーマをデバイス毎に再調整しました（なんか微妙に二次元っぽくなりましたな、タイトル部分）。以前の投稿『Any Mobile Theme Switcherでテーマ切替え＆不具合』で試してみたときは、若干の不具合があって少しやる気を削がれていたのだけれど、空いた時間にチョコチョコ弄っていたら自分にとっての最適解を見つけました。

　だいぶ昔にRWD（レスポンシブ・ウェブ・デザイン）をしばらく試行錯誤していた頃、デバイスの画面解像度によってCSSを振り分けるというのは、まあ合理的な事よと思っていたのですが、今年に入ってふと目にした記事を読んで愕然としました（↓）。

　まだしばらくは縁のなさそうなiPhone 6 のことなど考えもしなかったから、発売後から爆発的に売れているらしいこの最新デバイスの解像度の事は特に気にしてなかったのです。ええ、確かに広くなったというのは認識してましたが、その拡張の仕方がもう一貫性無くて適当というか…。RWDではCSS内に解像度毎に振る舞いの差異を追記していくのだけれど、これだけ世に異なる解像度を持ったデバイスが溢れているとなると（iPhoneだけでもバリエーション多過ぎ）、もう振り分けるのも面倒くさい。おまけに「Any Mobile Theme Switcher」でも縦・横の分岐で不具合が起きていたりして、それらの個別対応を一括処理するにはどうすれば良いのか…。

　と、そんな事をアレコレ考えていたとき、Appleから軽薄な新型MacBookの発表があって、新しく採用された１２インチのRetinaディスプレイの解像度に「あれ？」と思ったのです。ブログ記事にも書いたけれど、どうやらRetinaディスプレイほどの解像度があると、ピクセル数をキチンとした２とか３などの整数で割らなくても、見た目上の不具合（ジャギーとか滲みとか）は気にならないらしい（憶測です。この記事を書いている時点でまだ新しいMacBookの実機を見てません）。例えばこれまで僕は「iPadなら横1024ピクセル、iPhoneなら短い方は320ピクセル」という感じで綺麗に整頓された数値にしないといけないと思っていたのだけれど、Retina上のスケーリング機能が優秀であるのなら、縦・横のピクセル数なんて自分の都合で適当に決めてしまえば良いのではないか？と考えました。

　そこで今回はそれぞれのデバイスを下記のように決めてしまいました。ここでiPhoneの横を実際のピクセル数とは全く異なる480ピクセルにしたのは「調整しやすい数値だから」という自分本位の理由以外に何もありません。

　そう想定した上で、まずは簡単にCSSを組み直し、所有する唯一のRetinaディスプレイ搭載機であるiPod touch（第５世代）でプレビューさせてみたら特に問題ない様子…というか意図通りにバッチリ表示。これなら、３つのバリエーションを作成するだけで済むし、今後また違う解像度の新デバイスが登場しても「お前は横480ピクセルなの！」と決め打ちしているCSSを大きな包容力でスケーリングしてくれるに違いない。これはしばらくの間、大いに手抜き出来そうです。

　ただし問題もあります。iPhone用で480pixelに設定したりすると、Googleの「モバイル フレンドリー テスト」で不合格通知を食らいます。というのも、480pixelも広い横幅を取っていると、一般的なスマートフォンでは初回アクセス時に画面からはみ出してしまうからです（下図の、このページはGooglebotにどのように見えているか　参照）。flipflipflip.comでは、閲覧者が一手間かけてギュッと縮小表示させて初めてピッタリはまる…というわけです。でも、そんなこと気にしないよ！

　気付かせてくれた軽薄な新型MacBook有り難う。つづく。

2015-04-28 ＞ VPS＆WordPress引っ越しメモ