*

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

  関連記事

Cyberduck(windows)でブックマーク登録するときニックネームは半角で

以前も引っかかったのに、すっかり忘れてました。 タイトルの通りですが、CyberduckでFTP情報をブックマークに登録

AndroidでPCサイトを閲覧すると幅が狭まって余白ができる

実機(AQUOS PHONE 206SH)でPCサイトを検証したところ右側にボコっと余白ができる。 ググってるとAndr

企業のブランドカラーを調べるときに便利なサイト「BrandColors」

たぶんたまにしか使わないけど、たまに調べる必要がでてくる企業のブランドカラー。 そんなときに使えそうなサイト「Brand

jqueryを使用したチェックボックスの一括選択・一括解除

またチェックボックスネタで恐縮なんですが、jqueryでの書き方が分かりやすかったのでメモです。

ロリポップのプラン名が「チカッパ」から「スタンダード」に変わってた

今日ふらっとサーバーの契約状況を確認したら、いつの間にやらロリポのプラン名が変更されてました。 どうやら変更したばっかり

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

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