iphoneやipadでリンク画像をクリックしたときに、一瞬グレー表示されるのをなんとかしたいと言われました。
なんとかするといってもそれって仕様なんじゃないの？とも思いましたが、調べてみるとどうやらcss3で対応できるようです。

なるほどタップ時のハイライトカラーを透過させると...。

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

確かにリンクをタップした時にリンクエリアが一瞬グレーになることはなくなりました。

iPhoneというかiOSの場合は、上記のCSSの記述で問題ありませんが、Androidではこの指定は効きません。 ただし、Androidでは上記の「表示させない」記述だけは効くようです。意味がわかりません。

スマートフォン用ページでリンク色の指定をする

あるサイトをiphoeで見たら、なんかフォントサイズが大きかったり小さかったりでおかしなことになってました。
どうやら文字サイズを自動調整するようで、特に明示的に設定しないとOS側でフォントサイズを自動的に調整するようです。

自動調整を無効にするには

-webkit-text-size-adjust: none;

文字サイズを指定するには

-webkit-text-size-adjust: 150%;

と記述すればいいようです。

webkit系独自のプロパティで、iPhoneやiPod Touch などで閲覧した際に、横向きにすると縦の時より自動的に文字サイズが大きくなります。 初期値は自動調整になっているので、止めたい場合などに使えます。

-webkit-text-size-adjust

こういうノウハウをどんどんためていかないとなぁ...。