HPをiPhone用に最適化する [パソコン・インターネット]
ずっと放っておいたホームページを、自分用のポータルサイトとして使おうと内容を変えた。
で、どうせならiPhoneでも使えるようにしようと、表示をiPhoneに適合させてみた。
その備忘録。
手順1 ホームページのデザインを幅320ピクセルに固定する
・TABLEタグを使うという古い手法のままだけれど、320ピクセルにした。
・BODYタグのtop-marginとleft-marginを0にして、隙間を無くした。
手順2 iPhoneのSafariの表示に適合させる
・metaタグに name="viewport"を設定。
・contentにinitial-scale=1.0、minimum-scale=1.0を設定。
蛇足ながらmaximum-scale=4.0やuser-scalable=yesも設定した。
ここまでで冒頭のイメージのように iPhoneの画面にピッタリサイズで表示できる。
iPhoneを横にすると、自動的に480ピクセルに拡大表示してくれる。
手順3 ブックマークをホーム画面に追加するために
・57ピクセル四方の画像を作って、サーバーにアップする。
パス及びファイル名を img/iphone-icon.png とした。
・HTMLのソースにLINKタグを追加。
rel="apple-touch-icon"、href="img/iphone-icon.png"を指定。
手順4 iPhoneを操作して、HPのブックマークをホーム画面に登録。
用意した画像を勝手にアイコンらしくデザインしてくれる。
こんな風にアイコンが表示される。
iPhone用のウェブデザインはcss等をよ~く勉強しないと、この程度のことしかできない、ってことも学んだ。
2009-09-18 11:37
nice!(4)
コメント(1)
(^^) かつぽんさん、ガッツさん、Virgoさん、
nice! ありがとうございます。
by あるが (2009-09-19 22:33)