モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で、考えるべき点が数多くありましたので、簡単にお話ししたいと思います。最初に遭遇する問題は、Web ページサイズの適応の問題です。

最も一般的に使用される方法は次のとおりです。

• まず、ページサイズは画面からはみ出さずに画面いっぱいに表示される必要があります。 html <head> タグに viewport を追加するだけです (以下を参照)。パラメータは、ページ幅 = 画面幅、最大および最小の拡大縮小率はどちらも 1、ユーザーは拡大または縮小できないことを表します。

XML/HTML コードコンテンツをクリップボードにコピー

<メタ name = "ビューポート" コンテンツ= "幅=デバイス幅、最大スケール=1.0、最小スケール=1.0、ユーザースケーラブル=いいえ" >

• パーセンテージの適応: 長さの単位をパーセンテージに変換して、要素の長さと幅が異なる幅で変化するようにします。

利点: 幅間のシームレスな接続と、比較的便利な操作。

デメリット: フォントサイズを調整するには、別の一連の適応メソッドが必要です。画面の幅が 700 ピクセルを超える場合、パーセンテージに基づいていると要素が大きくなりすぎて、調整が難しくなります。

•Rem と em の適応: メディアクエリメソッドを使用して、さまざまな画面幅での <html> または <body> のフォントサイズを決定します。次に、適応性を実現するために、単位として px ではなく rem と em を使用します。

利点: さまざまな画面幅に応じて設定できるため、画面が大きすぎる場合に前述の比率の問題を完全に解決できます。フォントサイズも問題ありません。

デメリット: 幅の範囲に応じて設定され、シームレスな変換を実現できません。

--------------------------------------------------------------------------------

これらの互換性方法にはそれぞれ長所と短所があり、どれも完璧ではありません。短所を回避しながら長所を組み合わせるにはどうすればよいでしょうか。

Taobao の適応方式を参考にすると、偶然、ページ <html> のフォントサイズが画面の幅に応じて自動的に調整され、画面の幅と設定されたフォントサイズの商が一定であることを発見しました。

つまり、JS を使用して画面の幅を取得し、それを固定比率に従って縮小し、それを rem の単位長さとして使用して適応を実現するのだと思います。

これはあらゆる利点を備えた解決策ではないでしょうか? ?ちょっと興奮させてください(☆_☆)

--------------------------------------------------------------------------------

JS コードは非常に簡単に記述でき、rem 設定を使用してシームレスな接続を実現できないという問題を完全に解決します。

しかし、モバイル側でテストした後、問題が発生しました。モバイル側の Safari は、HTML が読み込まれる前に JS を超高速で実行しました。ページがビューポートに応じて幅を設定する前に、JS は間違った幅を読み取り、要素が以前の 0^0 の 2 倍の大きさになりました。この問題を解決するには、setTimeout() が必要でした。

--------------------------------------------------------------------------------

最終コード

JavaScriptコードコンテンツをクリップボードにコピー