HPをiPhone用に最適化する

ずっと放っておいたホームページを、自分用のポータルサイトとして使おうと内容を変えた。
で、どうせならiPhoneでも使えるようにしようと、表示をiPhoneに適合させてみた。

その備忘録。

手順1　ホームページのデザインを幅320ピクセルに固定する
・TABLEタグを使うという古い手法のままだけれど、320ピクセルにした。
・BODYタグのtop-marginとleft-marginを0にして、隙間を無くした。

手順２　iPhoneのSafariの表示に適合させる
・metaタグに name="viewport"を設定。
・contentにinitial-scale=1.0、minimum-scale=1.0を設定。
　蛇足ながらmaximum-scale=4.0やuser-scalable=yesも設定した。

ここまでで冒頭のイメージのように iPhoneの画面にピッタリサイズで表示できる。

iPhoneを横にすると、自動的に480ピクセルに拡大表示してくれる。

手順３　ブックマークをホーム画面に追加するために
・57ピクセル四方の画像を作って、サーバーにアップする。
　パス及びファイル名を img/iphone-icon.png とした。
・HTMLのソースにLINKタグを追加。
　rel="apple-touch-icon"、href="img/iphone-icon.png"を指定。

手順４　iPhoneを操作して、HPのブックマークをホーム画面に登録。

　用意した画像を勝手にアイコンらしくデザインしてくれる。

　こんな風にアイコンが表示される。

iPhone用のウェブデザインはcss等をよ～く勉強しないと、この程度のことしかできない、ってことも学んだ。