- Coding Methodology
- 第39回 JavaScriptでマルチデバイスコーディング～その2～
第39回 JavaScriptでマルチデバイスコーディング～その2～
前回に引き続き、今回もマルチデバイスに対応するためのテクニックの一つをご紹介します。今回はウインドウサイズごとにCSSを切り替え、レイアウトを変更するテクニックです。
マルチデバイスコーディングとは？ ーおさらいー
マルチデバイスコーディングとは、1つのHTMLファイルで
複数のデバイスに対応するコーディング技術です。
PCサイト用とスマートフォンサイト用を別々に作成することがなく、また更新性にも優れています。
レイアウトごとのCSSを用意する。
今回のサンプルでも前回同様、3カラム(クラス名"col3")と1カラム(クラス名"col1")の2パターンのCSSをあらかじめ用意しています。
前回のOS判別との違い
前回はiOSやAndroid osを判別し、OSごとにcssを振り分けていました。
今回のサンプルは、デバイスのウインドウサイズを取得し、指定したサイズ以下の場合にcssを振り分ける手法です。
この手法の場合、PCのウインドウサイズを縮小した場合でも命令が実行されるので、幅の狭いウインドウで見たときもコンテンツが隠れることなく、サイトを閲覧することも可能になります。
前回のOS判別と同時に実装する事も可能で、ターゲットキャリアに対しては確実にOSを判別してレイアウトを決定、その他に対してはウィンドウサイズを取得してレイアウトを決定・・・など、色々と使い分けをする事も可能です。また、PC画面で擬似的にスマートフォン・タブレットのレイアウトも再現できるので、開発効率アップにも繋がります。
