BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

モバイルウェブサイズ適応手法の実装

2022-01-26 09:49:07

ようやく手元のプロジェクトが終了し、行方不明者が戻ってきた！？プロジェクトを行う過程で、いろいろと考えさせられるポイントに遭遇したので、さっそくその話をしましょう。まず1つ目は、Webのリサイズ問題です。

現在よく使われている方法としては

- まず、ページサイズが画面上に広がり、はみ出さないようにすることです。html<head>タグに、ページ幅＝画面幅、最大・最小拡大率＝1、ユーザーズームなしというパラメータでviewport（下記）を追加するだけです。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < メタ 名前 = viewport"。 コンテンツ = <スパン "幅=デバイス幅、最大スケール=1.0、最小スケール=1.0、ユーザースケーラブル=なし"。 > <スパン

- パーセント適応：長さの単位をパーセント表現に変換し、要素の長さと幅が異なる場合に変化するようにする。

長所 幅が変わってもシームレスで、比較的簡単に操作できる。

デメリット フォントサイズを調整するために、別の適応方法を必要とする。画面幅が700pxより大きい場合、パーセント要素が大きすぎる状態が続き、調整が面倒になることがある。

-rem, em adaptive: メディアクエリを使って、画面幅が異なる場合の <html> または <body> のフォントサイズを決定します。

長所 異なる画面幅に応じて設定することができ、上記のような画面が大きい場合のスケール問題を完全に解決することができます。また、フォントサイズも問題ない。

短所：幅の間隔を基準に設定されるため、シームレスな変形ができない。

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

これらの互換方式にはそれぞれメリットとデメリットがあり、どれも完璧ではありません。では、デメリットを避けながらメリットを組み合わせるにはどうしたらよいのでしょうか。

タオバオのアダプティブ・アプローチを参考にしているうちに、ページ<html>のフォントサイズが画面の幅に合わせて自動的に調整され、画面の幅と設定したフォントサイズの商が一定量になることに行き当たりました。

そこで、JSで画面幅を取得し、それをremの単位長さとして一定の比率で縮小することで適応を実現しているのだと推測しました。

これこそ、すべての長所を備えたソリューションではないでしょうか！？ちょっとだけ興奮させてください(☆_☆)

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

JSのコードは非常に書きやすく、remとシームレスに設定できない問題を完璧に解決しています。

しかし、モバイルでテストした後に問題が発生します。モバイルサファリはhtmlが読み込まれる前にJSを光速で実行し、JSはビューポートに従ってページが設定される前に間違った幅を読み取るため、要素が元の0^0の2倍の大きさになり、問題を解決するためにsetTimeout()を必要とします。

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

最終コード

JavaScriptコード 内容をクリップボードにコピーする
  1. ゼプト( 機能 ($){   
  2. <スパン ヴァル  win = windowです。  
  3.         doc = 文書。  
  5. <スパン 機能  setFontSize() {   
  6. <スパン ヴァー <スパン  winWidth = $(window).width();   
  7. // 横幅が640を超えると制限されます
  8. <スパン ヴァル  size = (winWidth / 640) * 100;   
  9.         doc.documentElement.style.fontSize = (size < 100 ? size : 100) +。  'px'です。  ;   
  10.     };   
  12. <スパン //html の読み込みが終了する前に実行されるのを防ぎ、正しいページ幅が得られるようにします。
  13.     setTimeout( 機能 <スパン (){   
  14. <スパン // 初期化
  15.         setFontSize()で設定します。  
  17.     }, 200);   
  19. });  

最後に、remでadaptiveを行う過程で見つかった落とし穴を追加します。htmlが大きなfontsizeを設定すると、ブロック要素の内側のインライン要素のmargin、paddingが余分な値を持ってしまいますが、解決策は外側のラップブロック要素のfontsizeを0に設定することです。

以上、モバイルウェブページのサイズ適応の方法を紹介しましたが、ご参考になれば幸いです。また、スクリプトハウスをもっと支持していただければ幸いです。

元記事のアドレスです。 http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522958.html

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します