ホーム > CMS, Joomla! > JoomlaレスポンシブサイトにGoogleマップを埋め込む時の注意。

JoomlaレスポンシブサイトにGoogleマップを埋め込む時の注意。

Share on Facebook
このエントリーをはてなブックマークに追加

Google Mapを埋め込んだ上でレスポンシブサイトを構築するとiPhoneなどの閲覧の時に自動的にスマートフォン表示に切り替わる為に、レイアウトが崩れます。色々やってみた結果、吹き出しの表示を消すと崩れないことがわかりました。

埋め込みIframeの中の引数、「&output=embed」の後ろに「&iwloc=B」を追加します。そのまま &output=embed&iwloc=B と書きなおしてください。これで余計な表示がされなくなりレイアウトも崩れにくくなります。

カテゴリー: CMS, Joomla! タグ:
  1. 2013 年 5 月 14 日 14:41 | #1

    androidを意識されるならiFrameは避けられた方がいいと思います。以下は弊社の制作者だけに公開されているガイドラインからの引用です。

    ——————————————-

    Andoroidの標準ブラウザには、たくさんのバグがありiPhoneと共通のソースを利用するには致命的なものもいくつかあります。問題点や対策が発見され次第以下を更新します。

    onclickが反応しない。
    原則としてonclickの使用をひかえ、ontouchstartを使用するようにする。
    画面の縦方向が伸びたり縮んだりする操作をすると(一覧をクリックすると、その枠が広がって詳細を表示するなど)、それ以降スクロールが出来なくなる。
    これはいくつか原因があります。Androidでは画面の更新に問題があるようです。表示が 完了してからの動的なサイズ変更に対応が不完全なようです。まずiframeは絶対使用禁止です。cssで隠してあっても障害が出ます。さらに overflow:hiddenは本当に必要なところだけに設定してください。特にサイズが可変なエレメントに関してはoverflow:hiddenは 危険です。
    z-indexを無視して下のレイヤーがタップ時に反応する。
    反応はするものの動作はしませんので実害はないのですが、混乱を招きます。cssのbodyに-webkit-tap-highlight-color: rgba(0,0,0,0);を設定してください。

  2. 浅川浩二
    2013 年 5 月 15 日 01:46 | #2

    貴重な情報ありがとうございます。こちらでも検証して確認いたしますね。重ねてお礼申し上げます。

  1. トラックバックはまだありません。