yamaokaです。
だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。
ただし、今回はiPhone向けです。
タップされた場所をハイライトする
iPhoneのSafariでは「-webkit-tap-highlight-color」という拡張された属性があり、タップされた箇所に色を付けることができます。CSS3ではRGBaによる色指定ができるので、半透明の色を指定すればタップされた箇所をわかりやすく示すことができます。例えば、
-webkit-tap-highlight-color:rgba(255,0,0,0.40);数字を電話番号のリンクにしない
iPhoneのSafariはHTMLに含まれる数字を電話番号として検出、自動的に電話番号のリンクにしてしまいます。タップすると電話がかけられるので便利な場面もあるのですが、「123.45」のような小数点を含む数字や「100-0001」のような郵便番号、「2001-2011」のようなcopyrightの年号表記までリンクになってしまうのです。
この挙動を無効にするには
<meta name="format-detection" content="telephone=no">文字のサイズをコントロールする
PC向けに作成されたサイトをiPhoneで見た場合、フォントの大きさがPCで表示した場合と違った比率で表示されることがあります。iPhoneのSafariは文字の大きさを自動で調整してくれるのですが、自分でコントロールしたい場合もあるのではないでしょうか。
自動調整を無効にしたい場合、CSSで
-webkit-text-size-adjust:none;自動調整を無効にした場合でも、画面の向きが変わってローテートされた場合の表示の調整は行われます（iPhoneの場合）。
また、あえて自動調整にまかせるという選択肢もあると思うので、この属性を使用する場合はきちんとサイト全体の方針を決めてから使うのがいいのではないかと思います。
終わりに
iPhone向けの小さなtipsを3つ紹介しました。小さな画面で操作することが多い分、ちょっとした気配りで操作性が上がることも多いのではないでしょうか。少しでも気の届いたページを作っていけたらいいなと思います。
SafariのHTMLとCSSについてはAppleのリファレンスを見れば載っているので、参考にどうぞ。