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

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で、考えるべき点が数多くありましたので、簡単にお話ししたいと思います。最初に遭遇する問題は、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 の自動書式設定の改行保存の詳細な説明

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

無効にするとフォームの入力が送信できない問題の解決方法

HTMLノードの追加と削除の簡単な例

mysql 5.7.20 win64 のインストールと設定方法

EclipseにTomcatサーバー設定を追加する方法

HTML ハイパーリンク内の中国語文字化けの分析と解決

キャンバス操作プラグイン fabric.js の使い方を詳しく解説

HTML でスクロールバーを使用する際のヒントを共有する

入力要素 [type="file"] を使用する場合のスタイルのカスタマイズとブラウザの互換性の問題に関する議論

クールなページング効果を実現するネイティブJS

XHTML CSSを使用して正式なブログを書く

推薦する

Linux 環境に mysql5.7.36 データベースをインストールするチュートリアル

異なるデータベースで DROP TABLE を書く方法

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

枠線や境界線のない iframe を使用するための完全ガイド (実践経験のまとめ)

Linux で rsync を使用する方法

MySQL インデックスプッシュダウンを 5 分で理解する

ビューポートの基本原理と詳細な使用方法

IE6/7 における a.getAttribute(href,2) 問題の分析と解決

Vueが学生管理機能を実装

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装

Dockerコンテナのデータを復元する方法

Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。

MySQL ログインエラーを解決する: 'ユーザー 'root'@'localhost' へのアクセスが拒否されました

MySQL テーブルの読み取り、書き込み、インデックス作成、その他の操作の SQL ステートメントの効率最適化の問題を分析します。