ユーザーがブラウザ表示しているウインドウ幅を取得するコードです。覚え書き用に情報を残しておきます。
このコードのネタ元は、The Man in Blue > Experiments > Resolution Dependent Layoutのサイトからです。
このコードを使って何ができるかは、ユーザーのブラウザ表示幅を取得し、取得幅によってDOMツリー操作によるレイアウト変更を行うためです。
よくある手法は、スタイルシートを切り替えてレイアウト変更します。もう一つやってみたいことは、任意のブロック要素の属性値を変更することでレイアウト変更する手法です。
ユーザーのブラウザ表示幅を取得するjavascriptコード
Firefox・Safari・Netscapeでは、window.innerWidthプロパティで取得できます。IEの場合は、document.documentElement.clientWidthもしくは、document.body.clientWidthで取得するようにします。
モニタサイズは簡単に取得できますが、実際にユーザーがどれくらいの表示幅で日頃ページを閲覧しているかはわかりません。IE7.0・Firefox・Safariなどの最新ブラウザバージョンでは、サイドウインドウが表示できるようにもなっています。ブックマークやRSS情報などサイドウインドウ表示の状態で利用する場合、もちろんページ閲覧表示幅も狭くなります。
また、ブラウザを開きながら他のアプリケーションを同時に開いている場合なども考慮しなければなりません。
もっともリキッドレイアウトを採用すれば、こんなことを気にしなくてもいいのですが、最近の企業サイトはリキッドレイアウトからページ幅指定をしているサイトをよく見かけます。リキッドレイアウトの欠点もいくつかあるようです。
リキッドレイアウトで600px以下のページ表示幅の場合、イメージ画像などの廻りこみ部分のコンテンツ表示を変更することも可能です。リキッドレイアウトでのイメージ画像の廻りこみ指定もページ表示幅がある一定のサイズまで下がると、読みづらくなったりしますからね。img要素の属性alignを抜き取るようにしておいてもいいかと思います。
ページ表示幅を指定する場合、PC環境に対してのWEBページ提供を考えるのであれば、ブラウザ表示幅を取得し、適宜そのブラウザ幅に合ったコンテンツを提供するように考えればいいかと思います。大きなモニターを使ってページ表示幅にゆとりがある方には、マルチレイアウトでページスクロールの手間をなくすようにページ表示し、反対に表示幅の狭いユーザーには、最低限訴求したいコンテンツをできる限り見易い状態で表示するようにすればいいかと。
その他の端末を利用してのWEBページ閲覧に関しては、OSやブラウザバージョンを取得して代替ページを表示するように考えればいいと思います。表示幅も限られてきますので最低限必要なことのみを最優先に表示するレイアウトのページへ飛ばすようにする。
その他の参考サイト
他にもCSS Drop Column Layout | Muffin Research Labs by Stuart Colvilleのエントリーでは、ユーザーの表示幅に応じてレイアウトを変更するスクリプトを紹介しています。こちらは、ブラウザ表示幅によって、2コラムから3コラムもしくは4コラムまでレイアウトが変更します。但し、使用にあたっては各コラムでの制約があるのでその部分を気をつける必要があります。
コメントする