ユーザーのウインドウ表示幅を取得するjavascript

ユーザーがブラウザ表示しているウインドウ幅を取得するコードです。覚え書き用に情報を残しておきます。

このコードのネタ元は、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コラムまでレイアウトが変更します。但し、使用にあたっては各コラムでの制約があるのでその部分を気をつける必要があります。

トラックバック(0)

このブログ記事を参照しているブログ一覧: ユーザーのウインドウ表示幅を取得するjavascript

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/220

コメントする

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年12月 2日 19:09に書いたブログ記事です。

ひとつ前のブログ記事は「Firefoxショートカット(アドレスバー入力)」です。

次のブログ記事は「英和辞書ひきまくる Greasemonkey スクリプト-和英に最適なjavascript」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。