仕事で奇妙な問題に遭遇しました。長い間苦労しましたが、ついに解決しました。ここに分析のアイデアと解決策を記録します。
レスポンシブな企業公式 Web サイトを構築するプロジェクトで、初期段階で静的な画像ページが切り取られた後、テンプレートとして使用するためにバックエンドに送信され、基本的にプロジェクトは終了しました。
バックエンドを実装したところ、モバイル端末でのページ表示が正しくなく、非常にぼやけて見えることがわかりました。最初はメタの頭が覆われているのではないかと思いましたが、ソースコードを確認したところ、覆われていることがわかりました。
これは、デバイスの幅に応じてページ幅を適応的に変更するために私がよく使用しているメタ ヘッダーです。
<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 ファイルは変更できないことが明確に通知されます。したがって、この 640 ピクセルの固定幅の設定は、デバイスの幅に応じて変化する元のメタ設定を上書きします。
問題は、静的ページが完成し、歴史的なコード要因により、コードのかなりの部分が最初に rem 単位を使用していないため、CSS 効果を大規模に変更することができなくなったことです。 js を介してビューポートの幅をリセットすることによってのみ、再度オーバーライドできます。これは非常に単純ですが、コードは非常に醜いです。
しかし、この公式 Web サイトのページでも、iframe ページの幅が 640 ピクセルに固定されています。これはとても壊滅的です！デバイスの幅に応じて変化するメタを追加すると、これらの iframe が表示されなくなり、再度メタを追加しないと、公式 Web サイト自体が表示されなくなります。
幸いなことに、これらの iframe は統一された方法で導入されており、導入方法の js ファイルを変更することはできませんが、ビジネス コードで再度監視することは可能です。したがって、クリック イベントを再度バインドし、iframe が導入されているかどうかを確認した後、いくつかの特別なメソッドを使用します。
CSS3 には、要素を拡大縮小できるtransform: scale()メソッドがありますが、占有スペースの実際の幅と高さは変更されていませんが、表示効果は良好です。
対応するスケーリング率は、 缩放比例= 设备宽度/ 640を計算して取得し、導入した iframe でtransform: scale(缩放比例)設定することで、美しいスケーリングを実現できます。
これで問題は終わりですか？いいえ！まだ！ iframe は拡大縮小されますが、高さも拡大縮小され、コンテンツが不完全に表示されます。 height: 设备高度/ 缩放比例元の iframe の高さを復元できます。
もう終わったと思いましたか？あまり！まだまだ問題はあります！ iframe レイヤーは、 scale()属性によってスケールされた後、デフォルトで下方向と右方向にも一定距離移動します。これは、 scale()がデフォルトで中心に従ってスケールするためです。ここでは、negative margin、translate() などの適切な解決策を見つけるために多くの時間を費やしました。しかし、適切な移動比例係数を計算するのが難しいため、私の貧弱なアルゴリズムを試してみたことをお詫び申し上げます。長い時間が経ち、ついにあきらめることにしました....
CSS マニュアルを読んでいると、見慣れているようで馴染みのない属性を見つけました。
回転した要素の基点の位置を設定します。
変換原点: x 軸 y 軸 z 軸;
これには 3 つの属性値があり、それぞれ定義されたビューが X、Y、Z 軸上のどこに配置されるかを表します。
異国の地で旧友と再会、長い日照りの後に旧友と再会！私が欲しいのはあなたです！ transform-origin: 0 top 0ソリューション~
実はこの属性は昔から使われていたのですが、最初に書いたのはtransform-origin: 0という略称で、ブラウザで解析するとtransform-origin: 0 center 0となったのです…そのとき iframe を上に移動しようと思ったのですが、他の人がそのような機能を持っていることを知りませんでしたが、無視しました。まだ急いで勉強することはできないので、1 つの属性に半日を費やすことはできません。おそらくフロントエンドの資格はありません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。