まぁ言ってる傍から、午前半休です。昨日ちょっと調子に乗り過ぎて、頑張りすぎたな、という反省。

　さりげなく、表紙だけiPhone・iPod touch搭載のSafariに対応してみました。なかなかこのSafari、癖のある困ったヤツであります。

• 勝手に画面全体を拡大・縮小して表示する。つまり、文字サイズの指定や、画像のサイズをある意味無視するという仕様。
• 拡大縮小する倍率の判断は、表示物全体の横幅（Viewportと呼ばれる。初期値では最大を横幅980pxとしてレンダリングする）、ユーザの操作（ピンチイン・アウト）、iPhoneの向き（ポートレート表示／ランドスケープ表示）の3つから為される。
• このうち、iPhoneの向きによる表示の拡大縮小は、実際に手に持って操作してみるとかなり気持ちが悪い（個人的な感想）。テキスト中心のページで、一定のフォントサイズを指定しているのに、横向き（ランドスケープ表示）にした途端、文字や画像が1.3倍くらいに拡大されて表示されてしまうのは、親切なんだろうけども、何か嫌な感じだった。
• 結局、iPhone・iPod touchのSafari向けページのあり方としては、4つに絞られてくると思われる。
  1. 拡大縮小、総てを受け入れる。もうそういうものだから仕方が無い、という考え。これはこれでアリだとは思う。
  2. 最初から横幅をポートレート表示（320px）に合わせて構成する。ランドスケープ表示（横持ち・480px）になった際に、画像を含め拡大される、或いは、metaの指定により拡大縮小を禁止し、画面右側に空白が生じることは受け入れる。
  3. 最初から横幅をランドスケープ表示（480px）に合わせて構成する。ポートレート表示（縦持ち・320px）になった際に、画像を含め縮小される、或いは、metaの指定により拡大縮小を禁止し、横スクロールバーが表示されることは受け入れる。
  4. metaの指定により拡大縮小を禁止し、かつ、横幅をリキッドレイアウトにする。これにより、ポートレート表示・ランドスケープ表示いずれも、同じ文字サイズ・拡大倍率で、かつ、横スクロールバーが表示されない、空白が生じない見た目を実現することが可能。
• 一見、4.がすげぇ良く見えるけども、これは同時にブラウザの機能である「ピンチイン・アウト」を禁止してしまうことになるので、表示される文字サイズ、操作するボタンの大きさなど、かなり気を配る必要がある。
• 4.の場合。表示文字サイズをそれなりに読みやすくした際に、フォームの入力ボタンなどの大きさが、操作するには小さくなった印象。
• ランドスケープ表示（横持ち）にした際、上下にアドレスバー・操作ボタンが表示されることもあって、縦スクロールさせ辛い。縦スクロールさせるつもりが、行き過ぎてボタンを押してしまうこともしばしば。よって、長く文章を読ませるようなページには向かない。この辺、徹底して「ポートレート表示で見てね！」という前提で作るのも、アリかもしれない。
• まとめ。文字の表示やスクロールの操作などの感触は良好。この機体に作ったウェブサイトがきれいに表示されると、とても楽しい。ただ、画面サイズから言って、ボタンなどを並べて細かい操作をさせるページには向かない。ECサイトなどには向き辛いだろう。基本、読ませるページであって、ボタンは数個（iPhone・iPod touchのメインメニューアイコンのサイズ、80×80ピクセル以上が望ましいだろう）のようなものが心地よく操作できそう。ボタンは、横にいくつか並べるより、横長100％のボタンを縦に並べた方が選択しやすそうだった。

　さて、ぼちぼち出社する準備でもしますか。今日も働くぞー。

　Win XP＋IE8環境で、画像にマウスオーバーした際に、alt属性の内容がツールチップ表示されなくなっている。

<img src="" width="100" height="100" alt="内容" />
<a href="..."><img src="" width="100" height="100" alt="内容" /></a>

　上記のようにimg要素のalt属性を埋めただけでは、alt属性の内容がツールチップ表示されません。それぞれ、title属性を付けると表示されます。

<img src="" width="100" height="100" title="内容" alt="内容" />
<a href="..."><img src="" width="100" height="100" title="内容" alt="内容" /></a>

　下段の場合は、これでも表示されます。

<a href="..." title="内容"><img src="" width="100" height="100" alt="内容" /></a>

　ちょっとばかし補記。

alt : Alternate Text

http://www.w3.org/TR/html4/struct/objects.html#alternate-text

画像表示不可ブラウザなどでの代替テキスト。

title : Element Title

http://www.w3.org/TR/html4/struct/global.html#title

要素に対する表題。注釈的な役割。

　なので、

• img要素の場合、alt属性が十分に意味を成すため、title属性は必要ない（はずである）。読み上げブラウザへの対応は、title属性で補記するのが筋……と考えられるが、各読み上げブラウザごとの対応は不明。
• a要素の場合、title属性が必要な場合が多いと考えられる。

　Win XP＋IE8環境で、画像リンクにマウスオーバーすると、画像の下に空白ができてレイアウトが崩れる、という事態に遭遇したのでメモ。

　CSSで、a要素に background-color 設定をしている状態で、画像にリンクを張ると、マウスオーバー時にline-heightに応じた謎の空白が出現する。

　対処法は2つ。該当箇所について、（仮に class=”example” とする）

1. 無理やり（非推奨）
　　.example {
　　　line-height: 0;
　　}
2. 理由は分からないがこれで消える
　　.example a:hover {
　　　background-color: transparent;
　　}
　　.example a:active {
　　　background-color: transparent;
　　}

　うーん。もう少し要検証。

　取り敢えず、IE8・IE7の判別と、表示異常を吸収。BRタグのclear挙動がちと違うっぽい。ふむ。

　てっとり早くブラウザのバージョン情報で判別……したいんだけど、あれ？よく考えたら、非Vistaの場合って「MSIE6.0」って文字列が常に出るやん。6の判別、これだけじゃ無理やん。やっべ。あー、やっぱmsInterpolationModeの判別を先に噛まさないと駄目か、もしくはandで取るか。めんどくせー。今度直そ。

　いい加減、NetscapeとかMacのIEとか無視していいもんな。正式サポートとっくに終わってるし。

　別ウィンドウを、jsから最大画面幅・高さで開いた場合のウィンドウ内径、IE 7.0速報版です。
■ Windows XP SP2 ＋ Internet Explorer 7.0

1024×768

ステータスバー有：1014×652

ステータスバー無：なし。IE 7.0はステータスバーが消せない。

• IE 6.0との差異は、幅：＋2px、高さ：－24px。高さの24pxは、アドレスバーが消せなくなったため。
• なお、計測値は画面のテーマを「Windows XP」とした場合。「Windowsクラシック」などにするとタイトルバーの高さが減るため、ウィンドウ内径高さは少し増える。参考までに、本組み合わせの場合は高さ：676pxでした。
• なお、計測値はタスクバーが画面下部にある場合。タスクバーの高さを増やしたり、位置を移動させたらお手上げです（そりゃそうだ）。中身が全Flashの場合は、縦横100%でembedして、Flashからステージサイズ見てレイアウトを整えてやるのが一番てっとり早いっぽいです。

　別ウィンドウを、jsから最大画面幅・高さで開いた場合のウィンドウ内径。よく忘れるのでメモ。
―――――
■ Windows XP SP2 ＋ Internet Explorer 6.0 SP2

800×600

ステータスバー有：788×508

ステータスバー無：788×532

1024×768

ステータスバー有：1012×676

ステータスバー無：1012×700

• タスクバーの高さは、初期状態で30px。従って、jsで開く際の最大高さを570（800×600）／738（1024×768）で指定している。タスクバーを隠すとかされたり、タスクバーの高さを変えられたら……お手上げです。
• ステータスバーの高さは24px。
• ステータスバーは、ローカル閲覧で無い限り非表示にできない。
• 上記js表示は、基本のツールバーなど一切表示しない設定。ツールバーを表示した場合、ツールバーを移動できる／できないで高さに2px違いが出るので注意。