ページの横幅について

ページの横幅の対応は けっこう悩ましい状態になっています． Webページの本来の考え方では，ページ側では 余計な指定はせずに，各端末の事情を知っているユーザーエージェント（ブラウザ）側で適切に画面を描画してもらう "liquid design"（電子書籍の用語だと「リフロー可能なデザイン」）が理想なのだけど，実際には横幅を指定していないと22インチのディスプレイに ものすごい長い1行が表示されるといった問題(?)があってウケが悪かったりします．［22インチのディスプレイで全画面表示すれば あたりまえのことだし，ブラウザとしてもユーザーが全画面で見たいといっているのだから，最大の横幅にしたいんだろうと解釈するしかなく，これは仕方のないところ…　できればユーザー側でブラウザの横幅を適切に調整してもらいたいものだけど，なぜか全画面表示が好きな人がいて，そうもいかないらしい…．］

大きすぎる画面対策のために横幅を固定すると，今度は小さい画面の人が横スクロールしながら見なければならなくなってしまうので，body の max-width （ブラウザの横幅が指定された値まではブラウザの横幅にあわせて折り返し，指定された最大値を超えると最大値で折り返し）を指定して「大きすぎるブラウザ ウインドウ」に対応しようと考えるのだけど，これが また悩ましい． というのが，例によって例のごとく Internet Explorer が body に対する max-width に対応していないんです．

現時点で，Web ページの横幅設計・指定方法を考える上では下記のような考慮ポイントがありそう．

• 端末によって画面サイズが かなり大きくちがっている． 特に iPhone 以降は小さい画面の端末で閲覧されることを考慮したページ設計が求められる． 画面のサイズは最小4インチあたりから最大27インチあたりまで，ほんとに悩ましい状態になってしまった．
• max-width でページの最大横幅を指定することで大きすぎる画面の対策にする．
  • firefox と Google Chrome/Chromimum は これでOK．
  • Internet Explorer (IE) は少なくとも 8 の時点では max-width 未対応．
    対策としては CSS 内に JavaScript をかいて動的に width を決める方法[5]があるけど，かなり気もち悪い．また，実質的にも，現時点で IE6 を使っているような人たちは，JavaScript も off になっていたり，ディスプレイの実サイズが 800×600 だったりと，現代的な常識が通用しないケースが多い．そう考えると，古い IE を救うために，こまかな tweak を がんばるべきかどうか…
• iPhone はデフォルトで画面サイズ width が擬似的に 980px になる[6]．
  • Webサイトはwidthが800px以上のケースが多いための措置らしい．
  • 実サイズは320px（縦でもっている場合）．
  • viewport を使えば iPhone 用の画面サイズを指定できる．
    <meta name="viewport" content="width=device-width"> [6]
    <meta name="viewport" content="width=800"> [5]
    device-width にするとデバイスの画面サイズにあう．［あれ？ retina iPhone だと，やっぱりすごく小さい画面になってしまうのかな？　しかし，固定値にすると縦・横を持ち替えたときにおかしくなるし…］ width 以外のプロパティーもあるけど，実際に使いたいのは width だけかも．

Links