C.H. Random
  1. ホーム
  2. 記事

固定サイズページのIframeのレスポンシブ対応

Javascriptによる制御

公開
約 1 分（501 文字）
pngn のアイコンpngn府大 学域生 工学域 電気類 情報工学 · 2018年入学
固定サイズページのIframeのレスポンシブ対応

こんにちは。情報3回のpngnです。今回ランダムのWebを作るに当たってUnityのWebGLビルドなどのゲームをサイトに埋め込む処理をレスポンシブ対応する時ハマったのでその記録を残しておこうと思います。

世の中にはIframeのレスポンシブ対応の記事がいっぱいあるのですが、その殆どは埋め込みページのサイズは可変である事が前提になっています。そんななのでUnityのWebGLビルドなどの固定サイズの場合、スマホで表示すると残念な事になります(そもそもUnityのWebGLビルドはスマホ対応が完全にされていなかったりするのですが...)。

元々Iframeによるレスポンシブ対応が難しい理由は

  • zoomを使うと外枠も一緒に伸び縮みする
  • そのためscaleを使う訳ですが、普通に書くと定数になっちゃうので、PC版でもスマホ版でも同じ比率で圧縮される

解決策は簡単で、scaleを画面サイズから計算して、その逆数倍のiframeを作ると良いわけです。h, w, urlを書き換えてお使い下さい。

<div id="id1" style="width: 100%; margin: 15px 0;">
  <div style="position: relative;">
    <div id="id2" style="height: 0;">
      <iframe id="id3" allowfullscreen></iframe>
    </div>
  </div>
</div>
<script>
let h = 720; // 高さ(px)
let w = 720; // 幅(px)
let url = 'https://ch-random.net/post/23/game.html'; // url
document.getElementById("id2").style.paddingBottom = 100 * h / w + "%";
document.getElementById("id3").src = url;
let set_width = function() {
  let client_w = document.getElementById("id2").clientWidth;
  let per = client_w / w;
  let rev = 100 / per;
  let iframe = document.getElementById("id3");
  iframe.height = rev + "%";
  iframe.width = rev + "%";
  iframe.style = "position: absolute; top: 0; left: 0;  transform:scale(" + per + ");-o-transform:scale(" + per + ");-webkit-transform:scale(" + per + ");-moz-transform:scale(" + per + ");-ms-transform:scale(" + per + ");transform-origin:top left; border: 0;"
}
set_width();
window.onresize = function(){ set_width(); };
</script>

デベロッパーツールを使ってサイズ変更してみて下さい。

コードに関して、もう少しきれいな書き方があるなら教えて欲しいです...