レスポンシブサイトでPC・SP別々の問い合わせフォーム組み込み

Question

レスポンシブサイトでの質問です。
iframeの問い合わせフォームをレスポンシブサイトで組み込み、
PC・SP別々の問い合わせフォームで切り替えて表示させたいです。

HTMLにiframe記述を入れますが、どうやって切り替えさせればよいでしょうか。
現状PCの問い合わせフォームしか記述していなく、SPを検討中です。
置かれた状況がわかりにくいのですが、よろしくお願いいたします。

<section>
<div>
<iframe src="https://hogehohe〜/index.php" frameborder="0" width="988" height=" 1420" class="form"></iframe>
</div>
</section>

Answer 1

問い合わせ内容はPCとSPで別々ということですか？

デザインだけなら、sp用とcssとPC用のcssを用意しといて、
phpとかサーバーサイド側のロジックでスマホかブラウザかを判定して、値渡して
クライアントでその値がpcかwebかも判定してどっちかのcssを読み込むとかじゃ対応できませんか？

問い合わせ内容が変わるにしても、同じでいづれにしてもサーバーサイドで
スマホかブラウザかを判定する必要があると思います。

メディアクエリを使えばサーバーサイド側の対応いりませんが、僕はメディアクエリはおすすめしない派ですw
内容によりますが。

Comments

[Nyoki]

ありがとうございます、一旦cssで切り替えを試そうかと思います！

Answer 2

よっ
時間があって、いろんな方法を試しました。

1. CSSのMedia Queriesを使って、画面の横サイズにより、PC / SPっていうClassを表示します。

<style>
        .pc {
                display:block;
        }
        .sp {
                display:none;
        }
        @media screen and (max-width: 450px) {
                .pc {
                        display:none;
                }
                .sp {
                        display:block;
                }
        }
</style>

<div class="pc">
        <iframe src="http://www.karatetest.net" width="800" height="300"></iframe>
</div>
<div class="sp">
        <iframe src="http://www.karatetest.net" width="320" height="300"></iframe>
</div>

1. Iframeに追加されているサイトはResponsiveに変更, iframeのwidthは100%にする

サンプルで使うサイトはResponsiveにしてます。

<iframe src="http://www.karatetest.net" width="100%" height="300"></iframe>

1. JavascriptでIframeをResize (最悪のやり方)

<iframe src="http://www.karatetest.net" width="800" height="300" id="sample"></iframe>

<script>
        var getWindowWidth = function() {
                var w = window,
                    d = document,
                    e = d.documentElement,
                    g = d.getElementsByTagName('body')[0],
                    x = w.innerWidth || e.clientWidth || g.clientWidth
                return x
        }
        var sample = document.getElementById('sample')
        var setIframeSize = function() {
                var x = getWindowWidth()
                if(x < 300) {
                        sample.style.width = '320px'
                }
                else if(x < 500) {
                        sample.style.width = '400px'
                }
                else if(x < 600) {
                        sample.style.width = '500px'
                }
                else if(x < 800) {
                        sample.style.width = '600px'
                }
                else if(x < 900) {
                        sample.style.width = '700px'
                }
                else if(x < 1500) {
                        sample.style.width = '1300px'
                }
        }

        window.addEventListener('resize', setIframeSize)
        window.addEventListener('load', setIframeSize)
</script>

方法２はをおすすめにしますが、お問い合わせフォームが二ページに分けて、二つのIframeを使う必要があれば、方法１にしてください。

ここで試しました : リンク内容

:)

Comments

[Nyoki]

ちょっと試してみます！ありがとうございます