先日Facebookのいいね!ボタンを設置したところ、Android端末のChrome上でボタンをタップした際に
以下のようにボタンの背景色が消えてしまうという現象に出くわしました。

Screenshot

ボタンのcssを見てみると背景色の指定が無視されているようで、原因を探ってみるとどうやらviewportの設定が問題だと判明しました。
「minimum-scale」と「maximum-scale」の指定がまずかったようです。

ユーザーによるズームを禁止する場合には以下のように「user-scalable」のみ追記するのが良いでしょう。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

そもそもアクセシビリティなどを考えるとズームを禁止する事自体どうかという話ではありますが、Android2.3でcssのFixedを使う場合、「user-scalable=no」の記述がないと機能しない等、やむを得ない事もありますので、そういった場合には「minimum-scale=1」や「maximum-scale=1」などの記述をしないようにしましょう。
「user-scalable=no」があればどちらも必要ありませんしね。

尚、Googleのアクセシビリティガイドラインのページでは以下の指定が使われていますが、

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

こちらの設定でも背景はとんでしまいました。

結局viewportの設定としては以下の指定が一番良いですね。

<meta name=viewport content="width=device-width, initial-scale=1">

今回のような事例以外にもAndroidに関しては、バージョンによってviewportが効かなかったりviewportがらみのバグが多数報告されていますので気を付けたいと思います。