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

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

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

ウェブメッセージボード機能を実現するjs

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

JavaScript で 9 グリッドのモバイルパズルゲームを実装

Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項

アダプティブ Web デザインを実現する方法に関する関連知識ポイントの要約

ソースコード分析からTomcatがサーブレットの初期化を呼び出す方法の詳細な説明

ラジオボタンとチェックボックス効果の純粋な CSS 実装例

Linux xargsコマンドの使用

MySQL ログトリガー実装コード

推薦する

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

Linux での Firewalld の高度な設定の使用に関する詳細な説明

MySQL ログトリガー実装コード

CSS はコンテナレベル (div...) タグを 1 つの位置 (ページの右端) に固定します。

MySQLの挿入文字化け問題を解決する方法

JavaScriptプロトタイプチェーンの詳細な説明

11 の素晴らしい JavaScript コードリファクタリングのベストプラクティスの概要

Linux での MySQL マルチインスタンスの展開とインストールガイド

MySQL スケジュールバックアップソリューション (Linux crontab を使用)

Vue3でelement-plusを使用する方法の詳細な説明

Dockerでmongodbデータベースを使用するための実装コード

MySQL でスロークエリログを有効にする方法

Vueは開始時間と終了時間の範囲クエリを実装します

MySQL コマンドライン操作中のエンコードの問題の詳細な説明