投稿日：2017/04/21
下記のように他サイトの
※この情報は4/21現在シード・リミテッドでこの作業に関してcss(scss)調整をすると超過になるということで、HTMLだけで設置することを優先にした方法です。パーツ/scssを使用した情報は最下部に記載します。
ソース
http://s7710291.xaas.jp/
参考元：http://www.plazahome.jp/
【HTMLのみのやり方】
- 参考元サイトのソースを表示して
部分だけコピー - 通常パーツの中に2つ設置
- 囲むdiv等にそれぞれpc-only,sp-onlyクラスを付ける
- 【pc-onlyをつけたソース】画面サイズ768pxで縦横ともにスクロールが出ないことを確認する。でた場合は768px以下でサイズ調整をする。
- 【sp-onlyをつけたソース】widthを320にする。画面サイズ320pxで縦横ともにスクロールが出ないことを確認する。※現在の最少画面サイズ
※場合によってはscrolling=””もyes/noで調整してください。空欄でも構いません。
【設置ソース】
<section>
<div class=”container”>
<div class=”row”>
<div class=”col span_12 text-center”>
<div class=”pc-only”><iframe width=”460″ height=”320″ frameborder=”0″ scrolling=”” src=”●●●●●●”></iframe></div>
<div class=”sp-only”><iframe width=”320″ height=”485″ frameborder=”0″ scrolling=”” src=”●●●●●●”></iframe></div>
</div>
</div>
</div>
</section>
【パーツ/scssを使用したやり方】
http://x1892524.xaas.jp/
マップと同じ考え方で大丈夫だと思います。コーダーだと思いますので上記を参考にお願いします。
- パーツリストのマップをコピー
部分を挿入。サイズ指定を削除のうえ配置等調整
注意事項
1.paddingで表示範囲が決まるためものによっては余白が空きすぎます。
.shopinfo .span12 .map_container {
padding-top: 50%;
}
2.iphoneでスクロールできない現象が起きる時があります。その場合は下記のように追記してください。
-webkit-overflow-scrolling:touch !important;
他にも方法はあると思います。もし記載方法が間違っていましたらコメントで教えてください。