携帯電話でも快適に見れるように、モバイル用のCSSを作ってみた。これで２コラムのページや横幅の広いページでも左右にスクロールすることがなくなり読みやすくなったと思います。あとiPhone/iPod touchではページをホーム画面にブックマークしたときに表示されるアイコンも追加。
携帯電話でサイトを見ると多くはレイアウトが崩れ上下左右にスクロールするだけで疲れてしまうのでいらない情報を非表示にし、必要な情報だけを表示させ、横幅を統一する事でとても見やすくなります。
- 全体を包んでいるボックスに
width: 100%として横幅を固定 - サイドバー等の主要の
float要素を解除 - ロゴ位置と日付位置の調整
- トップへ戻るボタンを下部に設置し携帯電話のみに表示
Blackberry Bold 9700での表示