なんか以前も同じことあったじゃないか…と自己嫌悪ですが、人は忘れていく生き物なのでメモです。

※ちなみに今回のはスマホサイトを作成する際、解像度に合わせて画像を2倍のサイズで作る方向けです。

通常、上記のように画像を2倍サイズにしてスマホサイトを作成する方はベースとなるCSSに「zoom:0.5」を指定します。

//base.css
img { zoom:0.5; }

ですが、このままだとGooglemapを表示した際、下記のように灰色部分がちらほら見える感じになります。
gmap

これはbase.cssで指定してる「zoom:0.5」がGooglemapで表示される地図画像にも反映されて、画像が2分の1に圧縮されてるから?のようです。

ということで対応策として、googlemapの画像には別途「zoom:1」を指定する

//contents.css
#mapArea img { zoom:0.5; }

スマホが調子悪いんじゃない!ブラウザが調子悪いんじゃない!画像が圧縮されてるだけです。。
次回は忘れないとは思うのですが、忘れたらブログで検索してみようと思います。