質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.86%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,915

Nyoki

score 8

レスポンシブサイトでの質問です。
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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

  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>

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

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

:)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/08 10:24

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

    キャンセル

-1

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/08 10:26

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる