*

Googlemapをスマホサイトで表示させるときは「zoom:1」を忘れずに

   

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

※ちなみに今回のはスマホサイトを作成する際、解像度に合わせて画像を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; }

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

 -Google Maps, Web

Sponsored link

Sponsored link

  関連記事

no image

昔の記事もインポート

とっくの昔にお亡くなりになってると思ってた昔のblogが、支払いしたら生き返りましたw が、もう古い方は解約の手続きしち

no image

iPhoneから投稿

テスト

no image

連携できぬ

そういえば旦那さんが「Facebook」がどうこう言ってて、そういえばアカウントだけ取っていた。 Facebook 「手

no image

大塚商会のアルファメールプレミアにwordpressをインストール

また大塚商会のアルファメールさんですが、今度はプラチナではなくてプレミアです。 プレミアの場合は、wordpressの動

no image

野菜シスターズ

野菜一日これ一本 うわ〜AKB48。 やっぱこの人ら影響力あるんですね。

コメントを残す

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


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ