ブラウザのリサイズを利用したCSS切り替え方法

前書き

前々から、作成したサイトをスマートフォンにも対応させるべきかなと思っていたのですが、いちいちスマートフォン用のページを作成するのも面倒なので、とりあえず 320px でも閲覧できるスタイルシートを用意し、JavaScript でブラウザ幅によって有効/無効を切り替わるようにしてみました。

今回は、その際に使用したブラウザサイズによってスタイルシートを切り替える方法について記述しておきます。

作り終わってからCSS3のMedia Queries 使って同様の事ができることを知りました。他のサイトを作成するときにでも参考にさせて頂こうかと思います。
外部サイト
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

DOMで扱える幅に関するプロパティ

まずは、DOMでサイズを取得をするために、利用できそうなプロパティを抜粋してみます。

element.clientWidth
要素の幅 + padding
element.offsetWidth
要素の幅 + padding + border
element.scrollWidth
要素の幅 + padding ( + スクロール可能な領域)
window.innerWidth
ブラウザウインドウの内側(表示領域)の幅(IE非対応)
window.outerWidth
ブラウザウインドウの外側からの幅(IE非対応)
screen.width
モニタの表示領域幅

なお、今回は幅について記述していますが、Width の部分を Height に変更することで、その内容の高さを取得することが可能です。

ブラウザの表示領域の取得

ということで、ブラウザの幅に合わせてCSSを切り替えたいので、表示領域幅を表す window.innerWidth で取得することができるのですが、このプロパティがIEでは利用不可のため、別の方法で取得する必要があります。

これについては、ドキュメントのルート(<html>)を表す document.documentElement を対象に clientWidth で取得することができます。

body を対象にしても取得できますが、読込中にリサイズする以上 html タグから取得する必要があります。

変更方法

このページで使用している設定ですが、「ブラウザ幅が 530px 以下」を条件に代替スタイルシート(small.css)の有効/無効を切り替える場合を、一例として記述しておきます。

まず、ブラウザ幅が変更された際に読み込む代替スタイルシートを、HTML内で宣言します。

// head タグに追加
  • <link rel="alternate" href="./css/small.css" type="text/css" />

なお、head タグにいちいち変更を加えたくない場合は、外部JavaScriptファイル内から、追加するようにしてください。

次に、リサイズ時にスタイルシートの有効/無効を切り替える関数を作成し、window の resize イベントのリスナーとして登録します。

関連ページ: JavaScript でイベントリスナーを追加・削除する方法

// 外部JavaScript読込時
  • resize_style();
  • add_listener(window,'resize',resize_style);
// 切り替え用の関数
  • function resize_style(){
    • document.getElementById('small').rel = document.documentElement.clientWidth < 530 ? 'stylesheet' : 'alternate';
  • }

これで指定した値(px)までリサイズされた場合に、代替スタイルシートの rel 属性の値が変更されて切り替わるのですが、上記の変更方法は、あくまで px でのみ判別する場合です。

CSSで幅や高さを em 等の他の単位で指定してあり、その値を基準にリサイズしたい場合は、resize_style での有効/無効の条件を変更する必要があります。

例えば、このサイトではもう一つ代替スタイルシート(middle.css)を利用しているのですが、切り替えの際の条件は以下のようにしています。

  • document.getElementById('middle').rel = document.documentElement.clientWidth < (document.getElementById('sTitle').clientWidth * 1.32) + 530 ? 'stylesheet' : 'alternate';

これは em で指定しているサイドバーのサイズを、id="sTitle" を持つ要素のサイズを利用して求めたうえで判定に使用するようになっています。

このように em のサイズは、body 読込後に出力されない限り要素が無いため取得できないので、読込の際には screen か document.documentElement を対象として別の条件で切り替える必要があります。

その際は、デフォルトのフォントサイズが16pxということと、規約等で拡大・縮小ができない画像のサイズを考慮して計算した方がいいかもしれません。

スポンサードリンク

inserted by FC2 system