モバイルでiframeを拡大縮小するサンプルコード

仕事で奇妙な問題に遭遇し、一日中翻弄された挙句、ようやく解決したので、その解析と解決策を紹介します。

レスポンシブな企業サイトを作るプロジェクトで、事前に静的なグラフのページをカットして、テンプレートとしてバックエンドに提出するのですが、私も基本的にこのプロジェクトを辞めました。

バックエンドに着地すると、モバイル側でページがうまく表示されず、ぼやけているように見えることがわかりました。最初に考えたのは、メタヘッダが上書きされていることで、ソースコードを見てみると、そうなっていることがわかりました。

これは、ページの幅をデバイスの幅に合わせるために私がよく使っているメタヘッダです。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user- scalable=no" />

しかし、バックエンドのランディングフレームワークはテンプレートで直接導入され、公開されているリソースの中には実際にビューポートを設定するメタが含まれているものもあります。バックエンドの導入部分はこのようになっています。

<meta name="viewport" id="viewport" content="width=640px, user-scalable=no">

このヘッダーはjsファイルによって追加されたもので、jsファイルは変更できないと明示されていました! そのため、幅を640px固定にすると、デバイスの幅に応じて変化するように設定したmetaを上書きしてしまいます。

問題は静的ページが完成した時に、歴史的なコードの要因で、かなりの部分がそもそもrem単位を使っておらず、cssの効果を大量に修正することができなくなったことです。再び上書きするには、js resetでビューポート幅を設定するしかない......。これは非常に単純で、コードがかなり醜いことに他なりません。

しかし、ここでまた問題が発生します。この公式ページでは、幅が640px固定のiframeページも動的に導入されています。これはかなり壊れますね! デバイスの幅に応じたmetaを追加するとiframeが表示されなくなり、metaを追加しないと公式サイトそのものが表示されなくなるのです。

良い点は、これらのiframeは統一されたメソッドで導入されており、メソッドを導入しているjsファイルを変更することはできませんが、ビジネスコードで再度リッスンすることができることです。というわけで、今回もこのバインドクリックイベントでiframeが導入されたかどうかを判断した後は、いよいよ特別なメソッドを使っていきますよ。

css3には transform: scale() メソッドは、要素を拡大縮小するもので、プレースホルダーの幅と高さは実際には変わりませんが、表示の点ではまだ優れています。

を計算することで scaling = device width / 640 を導入すると、対応するスケーリングを取得し、iframe に transform: scale(scale) で、美しいスケーリングの出来上がりです

これで話は終わりでしょうか？いいえ、そうではありません。iframeはスケーリングされますが、高さもスケーリングされ、コンテンツは不完全なものになります。ここで height: device height / scaling で元のiframeの高さに戻すことができます。

もう終わったと思う？いいえ、そうではありません。まだ問題が残っています! scale() 属性は、デフォルトで iframe レイヤーを下方および右方向に拡大します。 scale() は、デフォルトで中央に拡大します。ネガティブマージンやtranslate()など、適切な解決策を探すのにかなり時間がかかりましたが、正しいスケールファクターの計算が難しいことと、自分のアルゴリズムに申し訳ないことから、長い時間をかけてこの方法をあきらめることにしました・・・・・・・・・。

cssのマニュアルに目を通すと、見慣れたようで見慣れないプロパティがありました
回転した要素の基準位置を設定します。

transform-origin: x-axis y-axis z-axis;

3つの属性値を持ち、それぞれ定義されたビューがx軸、y軸、z軸のどこに配置されるかを表します。

他国からお久しぶりです! それがいい! を設定します。 transform-origin: 0 top 0 を解決する〜。

実は、このプロパティは昔から使われていたのですが、私が最初に略語として書いたのは transform-origin: 0 としてブラウザでパースされます。 transform-origin: 0 center 0 ...... その時の感覚では、左右は解決していたので、iframeを上に移動させることしか考えていなかったのですが、そんな機能があることを知らずに、無視してしまいました。私はフロントエンドの資格はないのでしょう・・・・・・（逃避

以上、本記事では、皆様の学習のお役に立てれば幸いです。また、Scripting Houseをもっともっと応援していただければ幸いです。