iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない

t151m > iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない @ 2017/4/20 10:24
お世話になります。
テーマはbcColorsを使用しております。
題名どおりgooglemapをiframeにて固定ページに記述した場合
スマホ画面にて表示がgooglemapにあわせて崩れてしまいます。
style.ccsには
.gmap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.gmap iframe{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
を記述しPC画面では正常にレスポンシブします。
解決策等あればご教授頂けないでしょうか。
よろしくお願いいたします。

■ BaserCMSのバージョン:3.0.7
■ レンタルサーバー名:さくら
■ スマートURLの利用:ON
■ 利用しているデータベース:SQLite
■ PHPスキル 全くわからな
goichi > Re: iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない @ 2017/4/21 10:51
こんにちは。そのテーマを使っていないのですが、baserCMSというよりHTMLやCSSの問題であるように思います。ブラウザのデバッグモード(開発者モードとも)をつかって、原因を特定できませんか?
(例えば、「Google Chrome デバッグモード 使い方」などで検索すると、沢山の解説ページが出てくると思いますよ)
katokaisya > Re: iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない @ 2017/4/21 10:53
t151mさん こんにちは

引用:
スマホ画面にて表示がgooglemapにあわせて崩れてしまいます。

とのことですが、
GoggleMAP読み込みを固定ページ内で行う際に、どんな記述で読み込みをされていますでしょうか?

baserCMSの場合、固定ページはソース入力にすればbaserのヘルパーが使用できますので、
まずは、読み込んでいる固定ページのエディターをソース入力に切り替えてください


bcColorsの固定ページ内でのGoogleMapの読み込みは、初期データでは
<?php $this->BcBaser->element("googlemaps", array("width" => 680)) ?>

このようになっておりますので、
680px以下の横幅では、画面がはみ出します。


以下のように修正すると、きれいに収まると思います。

<?php $this->BcBaser->googleMaps(array("width" => "100%")) ?>
ログイン
ユーザー名:
パスワード:


  新規登録 / パスワード紛失

検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね!」をポチっとクリックしてください!質問の回答者や開発者の励みになります

フォーラムガイド


関連リンク

オンライン状況
7 人のユーザが現在オンラインです。 (6 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 7