20100207　iPhoneでの表示最適化(2)

　雑記草内の検索$${^{*1}}$$も「iPhone」で見やすく表示される様$${^{*2}}$$にした。

　ついでに長いローマ字単語を強制的に改行して表示させる様にした。これは検索だけではなく、雑記草内の内容全てに関して適用される様にした。そのためにCSSの別ファイル$${^{*3}}$$に次の一行を付け加えた。

body{word-break:break-all;$${^{*4}}$$ }

　この文はマイクロソフトのweb閲覧ソフト「インターネットエクスプローラー$${^{*5}}$$」だけに有効であるとあったが、試しに使ってみたとことiPhoneの閲覧ソフト「Safari$${^{*6}}$$」でも有効であった。iPhoneの画面に収まり切れないURLなど長い文字列は強制的に改行される。上記の文がないと、その長い文字列を一行に表示しようとして全体を縮小して表示してしまうので記事の他の文字が縮小されたり左に偏ったりしていた。例えばこの数列「12345678901234567890123456789012345678901234567890」は、パソコンの閲覧ソフトでは一つの単語として認識されて、表示ウィンドウを縮めても一行で表示されたままだが、iPhone上では折り返されている。

　通常の閲覧ソフトで改行して表示させたければ、HTMLファイル上の改行する部分に「<wbr>$${^{*7}}$$」を入れればいい。表示ウィンドウの横幅を縮めていくと真ん中辺りで、このように「1234567890123456789012345
6789012345678901234567890」改行される。

*1　雑記草内検索
*2　20100206　iPhoneでの表示最適化
*3　■ スタイルシートを外部ファイルで定義する
*4　word-break－スタイルシートリファレンス
*5　Internet Explorerとは 【インターネット・エクスプローラ】 - 意味/解説/説明/定義 ： IT用語辞典
*6　アップル - iPhone - iPhoneのSafariでインターネットを高速ブラウズ。
*7　<wbr> - 単語の区切り