モバイルWebページのサイズ適応の実装方法

ついに目の前のプロジェクトが完了し、行方不明者たちが戻ってきました！プロジェクトを進めていく中で、いろいろと反省点があったので、簡単に解説していきます。 最初に遭遇する問題は、Web ページのサイズ適応の問題です。

現在、より一般的に使用されている方法は次のとおりです:

• まず、ページサイズがオーバーフローせずに画面いっぱいになるようにします。 html タグにビューポートを追加するだけで済みます。パラメータはそれぞれ、ページ幅 = 画面幅を表し、ユーザーは拡大または縮小できません。外。

<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

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

利点：幅間のシームレスな接続、および操作が比較的簡単です。

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

•rem、em アダプティブ: メディア クエリ メソッドを使用して、さまざまな画面幅で または のフォントサイズを決定します。次に、適応を達成するための単位として px の代わりに rem、em を使用します。

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

短所：幅の間隔に従って設定すると、シームレスな変形を実現できません。

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

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

タオバオのアダプティブメソッドを参照しているときに、ページのフォントサイズは画面の幅に応じて自動的に調整され、画面の幅と設定されたフォントサイズの商は一定であることを偶然発見しました。

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

これはすべての利点を備えた解決策ではありませんか! ?興奮させてください(☆_☆)

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

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

しかし、モバイル端末でのテスト後に問題が発生しました。HTML がロードされる前に、JS が間違った幅を読み取っていました。その結果、要素は 0^0 の 2 倍の大きさになり、問題を解決するには setTimeout() を使用する必要があります。

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

最終コード

Zepto(function($){   
    var win = window,   
        doc = document;   
  
    function setFontSize() {   
        var winWidth =  $(window).width();   
        // 640宽度以上进行限制   
        var size = (winWidth / 640) * 100;   
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;   
    };   
       
    //防止在html未加载完毕时执行，保证获取正确的页宽   
    setTimeout(function(){   
        // 初始化   
        setFontSize();   
           
    }, 200);   
    
});

ついにアダプティブにremの使用を追加しましたプロセス 落とし穴が見つかりました - HTML がより大きなフォントサイズを設定すると、ブロック要素内のインライン要素のマージンとパディングに追加の値が設定されます。解決策は、外側のブロック要素のフォントサイズを 0 に設定することです。

上記のモバイル Web ページのサイズ調整の実装方法は、編集者が共有したすべての内容であり、参考になれば幸いです。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。

モバイル端末でアダプティブ Web ページ サイズを実装する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。