Raindrops theme and mobile device

日記


モバイルという言葉が、頭からはなれず、Raindropsというワードプレスのテーマの更新で、遅ればせながら、対応を検討し始めています。



テーマファイルが、モバイル対応機能を持っていなくても、WP-Touch等モバイルブラウザのアクセスに対して、適切な表示を実現するプラグインも存在する中で、あえて、テーマファイルで、特別な表示を作る必要性があるのか葛藤しながら、実験的な作業を始めました。



レインドロップスに与えた機能は、ターゲットブラウザ以外からのアクセスがあった場合に、フォールバックビューを提供できるようにしておくというもので、1カラムで、PC用のスタイルシートなどを剥ぎ取った表示を可能にするというものです。




レインドロップスは、固定幅　950px　974px　750px　と 100% fluid レイアウトがプリセットされており、fluid レイアウトのリミットは、デフォルトの設定で480pxから1280pxの範囲になります。





      if ( !empty($_SERVER['HTTP_UA_PIXELS'] )) {
        $size = $_SERVER['HTTP_UA_PIXELS'];
      }
      if(!empty( $_SERVER['HTTP_X_UP_DEVCAP_SCREENPIXELS'] ) ){
        $size = $_SERVER['HTTP_X_UP_DEVCAP_SCREENPIXELS'];
      }
      if(!empty( $_SERVER['HTTP_X_JPHONE_DISPLAY'] ) ){
        $size = $_SERVER['HTTP_X_JPHONE_DISPLAY'];
      }

といったコードで、ビュー幅を検出可能な場合に、480pxを下回る幅であれば、フォールバックビューを表示するという簡単なもので、果たして、実用性があるのかどうかも、手探りです。



テーマを利用してくれる人が、こんな場合には、フォールバックビューを表示したいという事が簡単に出来るように、強制的に動作させるための変数も、準備はしています。



誰かうまい使い方を考えてくれないかな、などと考えています。




今、話題の、レスポンシブWEBのように、幅を基準にして、同じ幅の様々なブラウザに対して、表示を行っていくという方法もありますが、現実問題としては、テーマの品質を維持する事が困難になると怖気づいてもいます


chrome and firefox



穏当な方法と考えたので、columns というクラスを追加しました。



CSS3のcolumnsをプリセットしたものですが、fluid layoutなどを選択した時に使っていただくと、ブラウザがサポートしていれば、自動的に段組しますが、サポートしていなければそのまま表示するという機能です



他の、レイアウト機能（YUIのネスティングカラム）との関係があるので、コンテンツに以下のように書き加えてもらおうと考えています

<div class="columns">

コンテンツ
</div>

近日中に公開予定の0.959 または 0.960に機能を含みます

しばらく、このフォールバックビューの使われ方をみてみたいと思っています


ツッコミ　アドバイス　歓迎


TOP