■スマホ用ホームページを作る(iPhone)

Google


スマートホン用のホームページを作る時のTipsと経験からの忘備録です。
これからも制作していくと思うので、参考になれば。
スマートホンのHP用の言語、本体の規格や仕様やOSアップデートなどで変わる事があります。

一番大事な事はヘッドの中にこの記述をいれます。
<meta name="viewport" content="width=device-width"/>

メタタグ・スマホ用ホームページの要


メタタグの中に、ネーム=ビューポート コンテント 幅=デバイスの幅
みたいな感じです。
これで各々のデバイス(機器=iPhoneなど)にあった大きさに自動調節してくれます。

HPがiPhoneで小さく表示される

↑こんな風に表示されてしまいます。
ピンチアウトで拡大されてもいいように、横幅600〜640pixで作りました。

なぜか変なところで改行される。
320pxで改行かな。
下の「もどる」もセンター合わせにしたのに。
それで、CSSでコンテナの中に入れたけどうまくいかなくて・・・???

スマートホン用HP完成

640pxの表の中に入れたらこんな感じに。
cssをもう少しいじってみようかな。
グーグルアドセンスは、234じゃ小さく表示されるので、468にしてみました。


 

iTunesでiPhoneの着信音に