iPhone向けサイト事始め。HTML5/CSS （今更）

今更「事始め」もなかろうというものですが、とにかく始めたのです。

もともとスマートフォンがスマートフォンたるゆえんは、PCに準じた使い方ができるということだと理解しているので、専用サイトを作るということには矛盾を感じます。
しかし、これだけ世の中が騒ぎ出すとそうも行かない。
しかも今回はiPhoneアプリのプロモーションですから、まぁ必然性はあります。

今回はPC向けのページは別に用意してあるので、新しくiPhoneだけを対象としたページを作るようにという依頼でした。（iPod touch含む）
Androidなどには対応しなくて良い、完全に専用ページなので、楽といえば楽。
参考サイトは「meet i」です。


■ページのサイズを決める

iPhoneの画面サイズの話。

Retina（iPhone4）ディスプレイ：横640×縦960

iPhone3G：横320×縦480

です。

画面のサイズが倍違います。

１～２年すればRetinaに最適化しても良いような気がしますが、まだ古い機種も多いはず。

なので今回サイトの横幅は横320を基本にします。

Retinaで見たときには2倍に拡大した状態になりますが、テキスト部分やCSSのグラデーションはきれいに再現されますので、概ね問題有りません。

■iPhoneでの初期表示サイズの設定

iPhoneのSafariは何も設定しないと、横幅980ピクセルとして動作します。

横幅980ピクセルのページなら画面いっぱいに表示されます。
横幅700ピクセルのページなら左右あわせて280ピクセルの余白ができます。

PC版サイトを表示するなら、まぁ妥当な設定でしょうね。
最近は横に長いサイトが多いので、980ピクセルなら少し余白が出るくらいだと思います。

今回は専用ページなのでぴったりあって欲しいのでそのように設定します。
metaタグ用にviewportというものが用意されていますので、それを使って設定します。
具体的にはこんな感じ↓

<meta name="viewport" content="width=320">

これで横幅320が基本になります。
※viewportにはその他にも設定できる項目がありますが、詳しくはぐぐって見てください。ここはリファレンスではなくてあくまで覚え書きなので。

これだけでは困ったことがあります。

◇困ったこと：画面が回転して縦横が入れ替わったとき、1.5倍に拡大してしまう。
→横長にしたときにも、480ピクセル分を320として使ってしまうわけです。
さすがにこれは見苦しい。表示できる情報も激減です。
参考サイトの「meet i」では、文字や画像の大きさが変わらずに横幅が伸びます。


■困ったことを解決する
まぁ、話はそんなに難しくないです。
拡大されたくないだけの話なので、viewpointに「maximum-scale = 1」を加えます。
1倍より大きくしないでね、ってことですね。
まとめるとこうなります。

<meta name="viewport" content="width=320, maximum-scale = 1">

そうすると、縦持ちから横持ちにしたとき、（内容側でサイトの横幅を指定していなければ）自動で横幅が伸びます。

これだけではありません。
これだけだと、横持ちにしたとき、文字サイズがでかくなります。
読みやすくするためのSafariの機能のようです。
（画面サイズや文字サイズの固定がユーザビリティ的に間違った方向であることは同意しますけどね）

文字サイズを固定するには、以下のCSSを使います。

-webkit-text-size-adjust:none

これをどこでも好きなところに指定すればOK。
htmlとかbodyとかの上位の要素に付けておくと楽ですね。


■画像について
今回の作り方は、iPhone3Gに対応するように作っているので、画像はRetinaでは拡大表示されます。若干ぼやけたりドットが粗く見えますが、個人的には許容です。
というか、これを許容しないなら、何らか振り分けを行わなければなりませんね。


■HTML・CSSについて
HTML5が使えます。バリバリ使えます。
背景色のグラデーション「-webkit-gradient」なんかも使えますので、画像の代わりにCSSを多く使って、きれいで軽いサイトにすることができます。
表示はDreamWeaverCS5のプレビューでも確認できます。PC上で確認するときは、SafariとかChromeを使えばOKです。


以上。
唐突に終わりますが、縦横の画面回転時の動作が特殊なのでちょっと考えちゃいました。