ホームページ > 記事 > ウェブフロントエンド > モバイル Web ページのコンテンツをアダプティブにする方法

モバイル Web ページのコンテンツをアダプティブにする方法

php中世界最好的语言オリジナル: 2018-01-23 10:34:012853ブラウズ

今回は、Web コンテンツをモバイル端末に適応させる方法について説明します。Web コンテンツをモバイル端末に適応させるための注意事項は何ですか。実際の事例を見てみましょう。

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

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

• まず、ページサイズがオーバーフローせずに画面いっぱいになるようにします。 HTML93f0f5c25f18dab9d176bd4f6de5d30e タグに

viewport を追加するだけです。パラメータはそれぞれ、ページ幅 = 画面幅を表し、ユーザーはズームできません。

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

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

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

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

•rem、em アダプティブ:

メディアクエリメソッドを使用して、さまざまな画面幅で 100db36a723c770d327fc0aef2ce13b1 または 6c04bd5ca3fcae76e30b72ad730ca86d のフォントサイズを変更する方法を決定します。次に、適応を達成するための単位として 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 がより大きなフォントサイズを設定すると、ブロック要素内のインライン要素

margin と padding に余分な値が設定されます。解決策は、外側のブロック要素のフォントサイズを 0 に設定することです。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。