今回は、Web コンテンツをモバイル端末に適応させる方法について説明します。Web コンテンツをモバイル端末に適応させるための 注意事項 は何ですか。実際の事例を見てみましょう。
ついに目の前のプロジェクトが完了し、行方不明者たちが戻ってきました!プロジェクトを進めていく中で、いろいろと考えさせられるポイントが出てきたので、簡単に解説していきます。 最初に遭遇する問題は、Web ページのサイズ適応の問題です。 現在最も一般的に使用されている方法は次のとおりです: • まず、ページサイズがオーバーフローせずに画面いっぱいになるようにします。 HTML タグにviewport を追加するだけです。パラメータはそれぞれ、ページ幅 = 画面幅を表し、ユーザーはズームできません。
<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
メディア クエリ メソッドを使用して、さまざまな画面幅で または のフォントサイズを変更する方法を決定します。次に、適応を達成するための単位として 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) + 'px' ; }; //防止在html未加载完毕时执行,保证获取正确的页宽 setTimeout(function(){ // 初始化 setFontSize(); }, 200); });
margin と padding に余分な値が設定されます。解決策は、外側のブロック要素のフォントサイズを 0 に設定することです。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 関連書籍:テーブル table のコンテンツオーバーフローに対処する方法
以上がモバイル Web ページのコンテンツをアダプティブにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。