コーディングメソドロジー

第38回 JavaScriptでマルチデバイスコーディング

近年、スマートフォンの台頭によりユーザが使うデバイスは多種多様になってきました。それゆえウインドウサイズがまちまちになっています。そこで今回はOS(デバイス)によってCSSを切り替え、レイアウトを変更するテクニックの一つをご紹介します。

JavaScriptでマルチデバイスコーディング

実装コードサンプル

マルチデバイスコーディングとは?
マルチデバイスコーディングとは、1つのHTMLファイルで複数のデバイスに対応するコーディング技術です。
PCサイト用とスマートフォンサイト用を別々に作成することがなく、また更新性にも優れています。
レイアウトごとのCSSを用意する。
今回のサンプルでは、3カラム(クラス名"col3")と1カラム(クラス名"col1")の2パターンのCSSをあらかじめ用意しています。

【コード解説】

1 デバイスが縦向きの場合にbodyにclass="portrait"を加える。
2 デバイスが横向きの場合にbodyにclass="landscape"を加える。
3 デバイスがiPhoneの場合にbody にclass="col1"(1カラム用クラス)を加える。
4 デバイスがAndroidの場合にbody にclass="col1"(1カラム用クラス)を加える。
5 その他のデバイス(PC,タブレット等)の場合にbodyにclass="col3"(3カラム用クラス)を加える。

今回のサンプルでは、デバイス(スマートフォンなのか、PCなのか)を判別して、そのデバイスに適したcssを付与する手法をご紹介しました。

この手法を用いて、予め2カラムのcssを用意し、タブレット機の場合は2カラムのcssを付与する・・・などの構成も実現可能となります。

このデバイスを判別する手法の他、見ている画面(ブラウザ)のサイズを取得し、そのサイズによってレイアウトを切り替えるという手法もあります。
例:見ている画面が320px以下なら1カラム、320px以上なら3カラムのcssを読みこませる。

この手法は多くのデバイスがリリースされている昨今、より少ないソースでデバイスごとの最適化をはかる一つのアプローチとなると考えています。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム