topページをiPhone対応に

iPhone対応のWebサイトを作ったことが無かったので、

せっかくなのでと思い立ち、

Topページのみですが、iPhone対応へと変更してみました。

もともとiPhone対応へとする予定もなく作成したサイトであり、

必要性もあまり感じられていないので、とりあえず対応させてみました。

というレベルですが。

いざ行った作業としては、

１．html側で、以下の文を追加(および修正)

<meta name="viewport" content="width=480,maximum-scale=0.6667 user-scalable=no " />

<meta name="format-detection" content="telephone=no"/>

<link media="screen and (min-device-width:481px)" href="css/main.css" rel="stylesheet" type="text/css" />

<link media="only screen and (max-device-width:480px)" href="css/iphone.css" type="text/css" rel="stylesheet"/>

２．CSS側で、

・画像は最大幅を超えないようにする。(img{max-width:100%})

・１カラムにする(ナビとか以外のfloatは無くす)

・各widthを100%とかにしていき、margin等調整。

これだけです。

あとは、iPhoneの実機確認でナビボタンが押しにくかったので画像サイズ調整をしたり、border設けてボタンだという認知を促せる形にしたり。

初めてだったこともあり、かなり苦労はしましたが、一晩で完了するぐらいのレベル。

いかんせんiPhoneシミュレータで確認してみると、反映されていないという、残念な結果ではありますが、必要性も低いので、充分充分。