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

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で、考えるべき点が数多くありましたので、簡単にお話ししたいと思います。最初に遭遇する問題は、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コードコンテンツをクリップボードにコピー

ゼプト(関数($){
var win = ウィンドウ、
doc = ドキュメント;
関数setFontSize() {
var winWidth = $(window).width();
// 幅を640以上に制限する
varサイズ = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (サイズ < 100 ? サイズ : 100) + 'px' ;
};
//HTMLが完全に読み込まれていない場合は実行を防止し、正しいページ幅を確保します
setTimeout(関数() {
// 初期化
フォントサイズを設定します。
}, 200);
});

最後に、適応のために rem を使用する際に発見した落とし穴について付け加えておきます。HTML で大きなフォントサイズを設定すると、ブロック要素内のインライン要素のマージンとパディングに追加の値が割り当てられます。解決策は、外側のブロック要素のフォントサイズを 0 に設定することです。

適応型モバイル Web ページサイズを実装する上記の方法は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

オリジナル URL: http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522958.html

<<: CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

>>: Vue の自動書式設定の改行保存の詳細な説明

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

DCL を使用して MySQL でユーザーを管理し、権限を制御する方法

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

HTML における DOM 要素のスクロールバースクロール制御の詳細な説明

MySQLトリガーの使用と注意すべき点

マップタグパラメータの詳細な紹介と使用例

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

JS で配列をループする 4 つの方法のまとめ

docker run後、ステータスは常にExitedになります

Mysql は最大接続数を表示し、最大接続数を変更します

Docker Alpine イメージのタイムゾーン問題に対する完璧な解決策

推薦する

MySQLトランザクションの基本的な学習と経験の共有

Chrome タブバーを実装するための CSS のヒント

du コマンドを使用して Linux システムディレクトリのサイズを取得する方法

MySQL Workbenchのダウンロードと使用方法のチュートリアルの詳細な説明

Linux の高性能ネットワーク IO と Reactor モデルの分析

DockerコンテナでArthasを使用するための詳細な手順

2018 年にリリースされる Apache Spark 2.4 の新機能は何ですか?

Bootstrap FileInputは画像アップロード機能を実装します

jQuery Ajax チャットボットの実装事例

Vue.js フロントエンドフレームワークにおけるイベント処理の概要

タオバオモールのホームページ上の大きな画像のデザイン構造に関する分析と意見（写真）

Json の長所と短所、使用方法の紹介

Tomcatにデプロイされたアプリケーションがフロントエンドページにアクセスできない問題について

docker-compose を使用して Clickhouse をすばやくデプロイする方法のチュートリアル

XHTML チュートリアル: Transitional と Strict の違い