- Coding Methodology
- 第38回 JavaScriptでマルチデバイスコーディング
第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を読みこませる。
この手法は多くのデバイスがリリースされている昨今、より少ないソースでデバイスごとの最適化をはかる一つのアプローチとなると考えています。
