iPhoneサイトを作るときの5つの必須コード

calendar

reload

スマートフォンの普及が加速しています。
それに伴いWeb制作者に、スマートフォン制作のスキルが求められてきています。

少し前から、色々調べてみたのですが、アンドロイドに関しては皆積極的ではありません。
理由は、挙動が統一されていないからです。
拡大縮小をさせない設定をしているのに、効かない機種があったりします。
1台1台検証する訳にもいかないし、新機種がすぐでてくるし、、、。はっきり言って検証のしようがありません。

なので、アンドロイドは一旦置いといて、iPhoneサイト制作に関わる事を記事にしたいと思います。

電話番号の自動検出を無効にする

iPhoneには、デフォルトの設定で電話番号らしき数字をタップするだけで電話をかけられるという便利な機能があります。
あくまで『電話番号らしき数字』なので、郵便番号・Fax番号なども電話番号として扱ってしまいます。
それを防ぐ為に

とし、自動認識をオフにします。
また、タップで電話させたい場合には、

とすれば、電話できるようになります。

ブックマーク時にホームに反映されるアイコン

ブックマークとしてホームに追加する時のアイコンの画像を指定できます。

ファイル名は固定ですが、
・「apple-touch-icon.png」角丸、光沢、ドロップシャドウが自動で加えられる。
・「apple-touch-icon-precomposed.png」にすると光沢だけ取れる

の2種類があります。
自分のホントのオリジナルデザインにしたい人は、後者がよさそうですね。

URLバーを隠す

ページ読み込み時にURLバーを隠すことができます。

ここで気をつけたいのは、[window.onload]
[window.onload]は複数箇所に書くと、挙動がおかしくなります。もし、他の処理で[window.onload]を使う場合は気をつけてください。

viewport の設定

viewportを設定する事によって、画面の幅、拡大縮小率を調整できます。

[width]
…200~10,000px or device-width

[initial-scale]
…倍率の初期値。デフォルト(未設定)は表示範囲から計算される値

[user-scalable]
…拡大縮小の可否(yes or no)

[minimum-scale][maximum-scale]
…倍率の最小値、最大値(1~10)。デフォルトは0.25、1.5。

文字サイズの自動拡大縮小を防ぐ

縦横で見た場合特定のエリアだけ、文字サイズが大きくなってしまう場合があります。
スマートフォンでは、自動で文字サイズを調整してしまう機能があるらしく、それが原因のようです。
CSSに以下コードを書き加えればOKなようです。