iOS safari:電話番号とwebアプリ

今回もwebデザイニングの2011.11月号のスマートフォン向けの記事には電話番号の扱いに
ついての注意点があったので、これもまとめておくことにします。しかしそれだけでは記事が
少ないのでwebアプリに利用しそうなフルスクリーンの設定についても書こうと思います。
 
 
 

・電話番号の自動リンクを無効にする

スマートフォン用のブラウザでは、ハイフンやピリオド混じりの数字を電話番号と誤認して
自動的にリンクを設定してしまうそうです。そのためシリアル番号のようなものでも電話番号
と認識され間違い電話のもとになる危険があります。ですから、この設定はOFFにするのが
良いそうです。その設定は以下の様にメタタグで行います。

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

 
企業サイトから間違い電話をかけてしまうのは絶対避けたいので、必須だと思います。
この設定をしてもリンクタグでtel:〜と明示してあげれば、電話番号へのリンクも可能です。
電話番号の自動リンクをOFFにしたサンプル
これで電話番号についての説明はおしまいです。
 
 
 
 

・webアプリを作成するときに利用しそうな設定

以下の設定をするとホームアイコンから起動したときブラウザのアドレスバーやメニューが
表示されないフルスクリーンモードになります。これを利用すればjQueryベースのwebアプリも
よりアプリっぽくなります。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

 
1行目はフルスクリーンモードでページを開く設定です。iOSではフルスクリーンでもステータス
バーが消えません。そのかわり上記の2行目の処理によってバーを黒くして目立たなくすることが
できます。他にはblack-translucentが設定でき、これは半透明のメニューバーになります。
これを設定しない場合はデフォルトのグレーになります。 
以下はblack-translucentが設定にした場合のキャプチャです(クリックで実物表示)。
 

これでwebアプリを作成する際の注意点としては、上記のようにページの上部がメニューバーに
隠れてしまうため、コンテンツが隠れないように上部マージンを持たせることです。
 
 
おしまい
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 6 = 十四


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>