サイトのレスポンシブデザインかを少しずつ進めているのですが、ひとつ厄介だったのがGoogleマップです。
ストリートビューや地図を貼り付けて使用しています。
これをPCで見た場合にちょうどいいサイズに指定すると、スマホなどで見た場合に画面の横幅に収まらなくなってしまいます。
かと言ってスマホサイズにすると、PCから見ると違和感が出てしまう。
モバイルフレンドリーテストでは問題にならないのですが、実際に見るとデザインも良くないし、操作性も良くない。
…で、簡単な方法が一つ。
横幅を数値ではなく％で指定するのです。
Googleマップのタグを<width=”◯◯◯(横幅の数値）”>となっているのを、例えば<width=”85%”>とします。
これはGoogleマップの横幅がカラムの横幅の85%の数値にするためのタグですが、これでOK。
すごく伝統的な、昔ながらの操作方法ですが実際に対応できています(^^)