マニュアル

スマホとPCでiframeの高さを変える方法（中～上級者向け）

ECステーションのにぎわいランキングR3やおすすめショーケースなどではiframeというタグを使用してサイト内にコンテンツを表示させております。

そして昨今では新HTMLテンプレート「カメレオンシリーズ」もリリ－スさせていただきましたがこれらは完全レスポンシブ仕様とはなっております。

レスポンシブ対応とはスマホでもPCでもテンプレートが最適化され表示が自動で切り替わるような作りのものを言います。

パソコンサイトとスマホで別々に設置する場合にはiframeの高さをそれぞれに最適な高さの値を指定すれば良いわけですが設置先のページ自体がレスポンシブの場合にはPCとスマホでiframeの高さをそれぞれ指定ができないためPCに合わせるとスマホで余白が出過ぎたり逆に見切れてしまうなどの不都合が発生します。

そこで今回はそのような場合でもPCとスマホの両方に対応する方法をご案内致します。

※この方法は楽天GOLDなどに作成されたレスポンシブページを想定したものとなります。

1. iframeに以下のclass指定を入れます。
   　
   class="height_set01"
   　
   例）
   <iframe class="height_set01" width="100%" height="600" src="https://www.rakuten.ne.jp/gold/iimonostore/test20190911/slide_double_all_out.html" frameborder="0" scrolling="no"></iframe>
   　
2. PC用の高さ(height)を指定します。
   　
   PC用の高さはiframeの高さ(height)にて値を指定します。
   上記例でいうと600となっています。
   　
   次にスマホの時の高さの指定をjavascriptで行います。
   これによりスマホ表示の時は指定した値で600が上書きされます。
   　
3. 以下のscriptを表示させるページ内に記述します。
   設置するiframeソースより下に記述をお願い致します。
   　
   <script>
   var ua = navigator.userAgent;
   var target01 = document.getElementsByClassName("height_set01");
   if (((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) || (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0)) {
   //スマートフォンの処理
   target01[0].setAttribute('height', '800');
   }
   </script>
   　
   　
   heightの値の「800」はスマホでちょうど良い高さを指定してください。
   　
   PCの時は通常のiframeの値が使われ、スマホの時はjavascriptで指定している値になることでPC、スマホ両方で最適化された表示となります。
   　
   　

複数設置の場合

この場合はclass名を増やして記述すれば対応可能となります。
以下の例を参考にしてください。
　
<script>

    var ua = navigator.userAgent;
    var target01 = document.getElementsByClassName("height_set01");
    var target02 = document.getElementsByClassName("height_set02");
    var target03 = document.getElementsByClassName("height_set03");
    var target04 = document.getElementsByClassName("height_set04");
    var target05 = document.getElementsByClassName("height_set05");
    var target06 = document.getElementsByClassName("height_set06");
    var target07 = document.getElementsByClassName("height_set07");

    if (((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) || (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0)) {
        //スマートフォンの処理
        target01[0].setAttribute('height', '805');
        target02[0].setAttribute('height', '756');
        target03[0].setAttribute('height', '480');
        target04[0].setAttribute('height', '1275');
        target05[0].setAttribute('height', '1880');
        target06[0].setAttribute('height', '220');
        target07[0].setAttribute('height', '500');
    }

</script>