モバイル H5 Web 開発の必須知識

序章

仕事をうまくやりたいなら、まずツールを磨く必要があります。今日の記事では、モバイル H5 開発に必要な基礎知識と、モバイル アダプテーションとレイアウトのソリューションを中心に説明します。すでにこの記事を読んでいる場合、またはモバイル端末の基本をマスターしている場合は、著者が書いた記事を読むことができます。

Mobile H5 Web ページ開発に関するよくある質問のまとめ

モバイル開発の必須知識 - ハイブリッド アプリ

ピクセル

ピクセルは、特定の位置と色を持つ小さな正方形です。写真と電子画面 (携帯電話、コンピューター) は、特定の色と特定の位置を持つ多数の小さな正方形を指定することによって接合されます。たとえば、私たちのコンピュータ画面は 1920 * 1080 のコンピュータ画面で、水平方向に 1920 ピクセル、垂直方向に 1080 ピクセルがあります。

ピクセル単位にはデバイスピクセル、論理ピクセル、CSSピクセルの3種類があります。

デバイスピクセル、個別ピクセル、デバイスピクセル比、CSSピクセル

デバイスのピクセル

デバイス ピクセルは物理ピクセルとも呼ばれ、画面上の最小表示単位、つまりデバイスの実際の物理単位であり、デバイスの製造時に決定されます。(iPhone6 750px) は一般に個々のピクセルよりも大きくなります。

独立したピクセル

独立ピクセル (DP または Dip) は一種の仮想ピクセルであり、ピクセルを測定するための論理単位であり、スケーリングなしの CSS ピクセルと同等です。(iPhone5 320px iPhone6 375px)。

デバイスのピクセル比

デバイス ピクセル比 dpr は、デバイス ピクセルと個々のピクセルの比率です。例えば、iPhone6のdprは2、iphone6Plusのdprは3です。

Web では、ブラウザーは dpr の取得に役立つ window.devicePixelRatio を提供します。CSS では、メディア クエリの min-device-pixel-ratio を使用して dpr を取得できます。React Native では、PixelRatio.get() を使用して dpr を取得することもできます。

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    
    }

デバイスのピクセルとデバイスに依存しないピクセルの比率は何ですか? 一般的な規則として、画面のピクセル密度が高くなるほど、1 つのデバイスに依存しないピクセルを表示するためにより多くのデバイス ピクセルが必要になります。

CSSピクセル

CSS で使用される px は、width: 128px などの CSS ピクセルを指します。CSS ピクセルのサイズは簡単に変更できます。ページを拡大しても、要素の CSS ピクセル数は変更されず、各 CSS ピクセルのサイズのみが変更されます。つまり、幅 128px の要素を 200% に拡大縮小した後、その幅は 128 css ピクセルのままですが、各 css ピクセルの幅と高さは 2 倍になります。元の要素の幅がデバイスに依存しない 128 ピクセルの場合、200% にスケーリングすると、要素の幅はデバイスに依存しない 256 ピクセルになります。

CSS ピクセルとデバイス非依存ピクセルの関係

• スケーリング比は、CSS ピクセルの辺の長さ/デバイスに依存しないピクセルの辺の長さです。
• ズーム率が 100% の場合、1 css ピクセル サイズはデバイスに依存しない 1 ピクセルに相当します。
• 200% のスケーリングでは、1 css ピクセル サイズは (2 * 2) デバイスに依存しないピクセルに等しくなります。

網膜スクリーン

先ほどピクセルとデバイスのピクセル比について説明しましたが、ここでは Retina スクリーンについて説明します。いわゆるRetina表示規格とは、より高い解像度を達成し、画面表示の精細さを向上させるために、1 つの画面により多くのピクセルを圧縮することです。通常の読み取り距離では、人間の目は画面上のピクセル粒子を区別できないため、画面表示はより繊細で滑らかになります。iPhone4 以降、Apple は自社製品 Mac、iPhone、iPad の画面を構成しましたRetina。

解像度を上げるにはさまざまな方法があります

• 通常の画面では、サイズが大きくなることで解像度が向上します。
• Retina スクリーンは、画面の単位面積あたりのピクセル数を増やす (PPI を増やす)、つまりピクセル密度を高めることで解像度を高めます高像素密度屏幕。

同じデバイスの物理サイズでも、CSS ピクセルと物理ピクセルの変換は異なります

• 通常の画面: 1px は 1 物理ピクセルに相当します。
• Retina スクリーン: 1px は 4 つの物理ピクセルに相当します。

kとp

画面を説明するために K と P の単位がよく使用されます。

• Pは画面の縦方向のピクセル数を表し、1080Pは縦方向のピクセルが1080個あることを意味し、解像度が1920X1080の画面が1080P画面となります。
• Kは画面の横方向のピクセル数を表し、一般的に横ピクセルが2048を超えると2K画面、4096を超えると4K画面となります。

インチ

一般に、インチは画面の物理的なサイズを表すために使用されます。たとえば、コンピューターのモニターでは 17、22、携帯電話のモニターでは 4.8、5.7 など、すべてインチが使用されます。なお、サイズは画面の対角線の長さです。1 インチ = 2.54 センチメートル。

PPI

PPI (ピクセル/インチ): インチあたりのピクセル数。

PPI は、画面の鮮明さと画像の品質を表すために使用できます。PPI を使用して画像を記述する場合、PPI が高いほど画質が高くなります。PPI を使用して画面を記述する場合、PPI が高いほど画面が鮮明になります。

計算方法 横の画素数の二乗と縦の画素数の二乗の和の平方根を画面インチ（画面の対角長）で割ります。

DPI

DPI (Dot Per Inch): つまり、1 インチあたりのドット数です。

通常、DPI は画像や画面を説明するために使用されます。このとき、DPI は PPI と同等である必要があります。DPI は、プリンタを説明するために最も一般的に使用され、プリンタが 1 インチあたりに印刷できるドット数を示します。

したがって、プリンターの DPI が高くなるほど、印刷される画像の精細度は高くなりますが、同時に消費するインク ドットと時間も多くなります。

えっと

em 要素自体に対して、1em は要素のサイズfont-sizeに等しくなります。font-size継承によりfont-size、この要素のサイズが設定されていない場合でもfont-size、親要素が継承されますfont-size。親要素がない場合は、DOM ツリーをルート要素まで検索しますhtml。ルート要素のデフォルトのフォント サイズは次のとおりです。 16ピクセル。

レム

em をベースにすると、rem はさらに単純になります。rem はfont-sizeルート要素 html のサイズにのみ関係し、サイズは固定です。1 はremルート要素htmlの。

ビューポート

レイアウトビューポート

レイアウトビューポートは、モバイル端末でWebページを表示する場合、モバイル端末の画面サイズが比較的小さいため、モバイル端末の画面サイズを利用してWebページをレイアウトすると、ページ全体のレイアウトが乱れて表示されてしまいます。 。したがって、モバイル ブラウザには、ページのレイアウトを表示するために使用されるレイアウト ビューポートの概念が用意されています。一般に、レイアウト ビューポートのデフォルト サイズは 980 ピクセルであり、PC の Web ページをモバイル ブラウザでレンダリングできるようになりますが、非常に小さいため、ユーザーは Web ページを手動で拡大できます。document.documentElement.clientWidth / clientHeight を呼び出すことで、レイアウト ビューポートのサイズを取得できます。レイアウト ビューポートは、Web ページの幅として理解できます。

ビジュアルビューポート

ビジュアル ビューポート、ビジュアル ビューポートとは、モバイル デバイス上で表示できる領域のビューポート サイズを指し、通常はデバイスの独立したピクセル サイズを指します。ビジュアル ビューポートとレイアウト ビューポートの関係は、窓から外の景色を見るようなもので、ビジュアル ビューポートが窓で、外の景色がレイアウト ビューポート内の Web ページのコンテンツです。window.innerWidth / innerHeight を呼び出すことで、視覚的なビューポートのサイズを取得できます。ビジュアル ビューポートは、デバイスに依存しないピクセル サイズとして理解できます。

理想的なビューポート

理想的なビューポート。通常、レイアウト ビューポートはビジュアル ビューポートよりも大きいため、ページ全体を表示するにはドラッグしてズームする必要があります。そこで、理想的なビューポートという概念が提案されており、理想的なビューポートでは、ユーザーはズームやスクロールを行わずにページ全体を表示でき、異なる解像度でページに表示されるコンテンツは同じサイズになります。理想的なビューポートは、実際にはレイアウト ビューポートのサイズを変更して、デバイスの幅と等しくなります。この幅は、デバイスの独立したピクセルとして理解できます。したがって、理想的なビューポートに従って設計されたページは、同じように表示されるはずです。異なる解像度の画面。デバイスに依存しないピクセルを返す screen.width / height を呼び出すことで、理想的なビューポート サイズを取得できます。理想的なビューポートは、均等レイアウト ビューポートとビジュアル ビューポートとして理解できます。

メタタグを使用してビューポートを制御する

モバイル デバイスのデフォルトのビューポートは、画面よりも広いビューポートであるレイアウト ビューポートで、デフォルトの幅は 980 ピクセルです。そのため、メタ タグを使用してビューポートを制御することが多く、width=device-width理想的なビューポートを実現するために、レイアウト ビューポートとビジュアル ビューポートを同じに設定することが一般的です。

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

ビューポートのプロパティ

• width 正の整数またはデバイス幅 (ピクセル) で、レイアウト ビューポートの幅を定義します。
• height 正の整数またはデバイスの高さ (ピクセル) で、レイアウト ビューポートの高さを定義します。
• Initial-scale0.0 ～ 10.0 は、ページの初期ズーム率を定義します。
• minimum-scale0.0 - 10.0 スケーリングの最小値を定義します。maximum-scale の値以下である必要があります。
• minimum-scale0.0 - 10.0 スケーリングの最大値を定義します。minimum-scale の値以上である必要があります。
• user-scalable ブール値 (yes または no) no に設定すると、ユーザーはページを拡大または縮小できなくなります。デフォルト値は「はい」です

適応スキーム

あらゆる種類の携帯電話と携帯電話画面があるため、モバイル H5 開発を行う場合は、適応スキームを理解する必要があります。つまり、私たちのコードセットはさまざまな種類の携帯電話と互換性があります。移動端末適応方式には主に@media媒体查询方案、rem方案、vw vh方案、 があり、以下では順に紹介していきます。

CSS を使用したメディアクエリ @media

メディア クエリを使用してさまざまな画面に適応します。メディア クエリに興味がある場合は、独学で学習できます。

@media *mediatype* and|not|only *(media feature)*  {
    
    
    CSS-Code;
}

@media screen and (min-width: 375px) {
    
     .box {
    
     width : 160px; } }

@media screen and (min-width: 750px) {
    
     .box {
    
     width : 320px; } }

メディア クエリは適応の問題を解決できますが、メディア クエリを使用するデメリットも明らかです。

1. ページ上のすべての要素は、異なる @media で異なるサイズを定義する必要があり、コードは冗長です。
2. 画面サイズがもう 1 つある場合は、@media クエリ ブロックをもう 1 つ書き込む必要があります。
3. メディア クエリ ブロックの書き込み順序も非常に特殊で、後のブロックが前のブロックを上書きするため、間違いが発生しやすくなります。

レムを使う

remについては以前にも紹介しましたが、1remのサイズがfont-sizehtml要素のサイズとなります。したがって、rem レイアウトの使用の核心は、htmlルート要素のフォント サイズを動的に設定することです。lib-flexibleレム適応スキームの中で、アモイとスキームがより人気がありますamfe-flexible。

lib-flexibleそしてamfe-flexible、これら 2 つのモバイル端末適応ソリューションは rem に基づいています。使用方法については以下で詳しく紹介しますが、公式ドキュメントには、viewport本機が多くのブラウザと互換性があるため、lib-flexibleこのamfe-flexible過渡的な解決策は現在のバージョンであっても以前のバージョンであってもすでに放棄される可能性があるため、特定の問題があると記載されています。viewportこれの代わりにこれを使用し始めることをお勧めします。

ライブラリに柔軟な

興味のある方は、lib-flexibleのソース コードを参照してください。このバージョンは自動的に生成されますviewport meta标签。

コアコード:

// 根元素字体的大小是布局视口大小/10。
function refreshRem(){
    
    
  var width = docEl.getBoundingClientRect().width;
  if (width / dpr > 540) {
    
    
      width = 540 * dpr;
  }
  var rem = width / 10;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}

// 动态生成 viewport meta标签
if (!metaEl) {
    
    
  metaEl = doc.createElement('meta');
  metaEl.setAttribute('name', 'viewport');
  metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  if (docEl.firstElementChild) {
    
    
      docEl.firstElementChild.appendChild(metaEl);
  } else {
    
    
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
  }
}

注意点：

// 如果是苹果手机，才会根据dpr进行缩放，其余的都不做缩放处理
// 我觉得这里的设计应该主要是解决1px的问题吧，在amfe-flexible方案中已经放弃了
if (!dpr && !scale) {
    
    
  var isAndroid = win.navigator.appVersion.match(/android/gi);
  var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  var devicePixelRatio = win.devicePixelRatio;
  if (isIPhone) {
    
    
      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
    
                    
          dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
    
    
          dpr = 2;
      } else {
    
    
          dpr = 1;
      }
  } else {
    
    
      // 其他设备下，仍旧使用1倍的方案
      dpr = 1;
  }
  scale = 1 / dpr;
}

lib-flexible の使用方法:

// 安装
npm install lib-flexible --save-dev

// 引用
import 'lib-flexible/flexible.js'

viewport meta标签これにより、次のようなIndex.html ページが自動的に生成されます。<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

適切な構成を使用するとlib-flexible、さまざまな携帯電話の画面に適応できます。計算式だけ覚えておけば大丈夫です某元素css尺寸 = 某元素设计稿尺寸/(设计稿宽度/10)。たとえば、デザイナーのデザイン ドラフトが 375 で、デザイン ドラフト上の要素の高さが 75 ピクセルであると仮定すると、コード内の要素の高さを に設定する必要があります75/(375/10) = 2rem。

手動計算が特に面倒だと感じる場合は、postcss-pxtorem プラグインを使用して自動的に計算できます。

postcss-pxtorem プラグインの核心は、rootValue を設定する必要があることです。設計ドラフトが 375 の場合、rootValue を 37.5 に設定するだけで済みます。設計ドラフトが 750 の場合、rootValue を 75 に設定するだけで済みます。このように、CSSでデザインに合わせて要素のpxサイズを設定するだけで、プラグインがパッケージ化時にremの値を自動的に計算してくれるので、とても便利ですよね。

// 这里是postcss-pxtorem插件的默认配置
{
    
    
  rootValue: 16,
  unitPrecision: 5,
  propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
  selectorBlackList: [],
  replace: true,
  mediaQuery: false,
  minPixelValue: 0,
  exclude: /node_modules/i
}

// 一般我们只需要修改rootValue即可
{
    
    
  rootValue: 37.5,
}

アンフェフレキシブル

興味のある方は、 amfe-flexibleのソースコードをご覧ください。このバージョンのコードはより簡潔で、自動生成されませんviewport meta标签。

コアコード:

// set 1rem = viewWidth / 10
function setRemUnit () {
    
    
  var rem = docEl.clientWidth / 10
  docEl.style.fontSize = rem + 'px'
}

使い方：

// 安装
npm install amfe-flexible --save-dev

// 引用
import 'amfe-flexible/index.js'

// 在index.html页面添加  viewport meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

このスキームにはamfe-flexible、dpr、自動ラベル生成、ページズームはなくviewport meta、より簡潔になります。

使用方法とlib-flexible同様に、amfe-flexible適切な設定を行うことで、さまざまな携帯電話の画面に適応させることができます。計算式だけ覚えておけば大丈夫です某元素css尺寸 = 某元素设计稿尺寸/(设计稿宽度/10)。たとえば、デザイナーのデザイン ドラフトが 375 で、デザイン ドラフト上の要素の高さが 75 ピクセルであると仮定すると、コード内の要素の高さを に設定する必要があります75/(375/10) = 2rem。

手動計算が特に面倒だと感じる場合は、postcss-pxtoremプラグインを使用して自動的に計算できます。

postcss-pxtorem プラグインの核心は、rootValue を設定する必要があることです。設計ドラフトが 375 の場合、rootValue を 37.5 に設定するだけで済みます。設計ドラフトが 750 の場合、rootValue を 75 に設定するだけで済みます。このように、CSSでデザイン案に合わせて要素のpxサイズを設定するだけで、プラグインがパッケージ化時にremの値を自動で計算してくれるのでとても良いですよね。

// 这里是postcss-pxtorem插件的默认配置
{
    
    
  rootValue: 16,
  unitPrecision: 5,
  propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
  selectorBlackList: [],
  replace: true,
  mediaQuery: false,
  minPixelValue: 0,
  exclude: /node_modules/i
}

// 一般我们只需要修改rootValue即可
{
    
    
  rootValue: 37.5,
}

vw vh を使用する

[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-MMIMb2P3-1668602484737)(https://p1-juejin.bytaimg.com/tos) -cn-i-k3u1fbpfcp /7a8115dc49f94892964ae1913e4818ec~tplv-k3u1fbpfcp-watermark.image?)]

• vw: ビューポートの幅の短縮形、画面幅 = 100vw。
• vh: vw と同様、ビューポートの高さの略で、画面の高さ = 100v です。
• vmin: vmin の値は、現在の vw と vh の小さい方の値です。
• vmax: vmax の値は、現在の vw と vh のうち大きい方の値です。

vw と vh を使用した適応方法は、rem 方法よりも簡単で、ビューポートのメタ タグを設定し、それを直接使用するだけです。

使い方：

// 在index.html页面添加  viewport meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

上記lib-flexibleと同様のamfe-flexible使用法なので、さまざまな携帯電話の画面に適応できます。計算式だけ覚えておけば大丈夫です某元素css尺寸 = 某元素设计稿尺寸/(设计稿宽度/100) vw。たとえば、デザイナーのデザイン ドラフトが 375 で、デザイン ドラフト上の要素の高さが 75 ピクセルであると仮定すると、コード内の要素の高さを に設定する必要があります75/(375/100) = 20vw。ここで、幅と高さの単位として vw のみを使用できることに注意してください。

手動計算が特に面倒な場合は、postcss-px-to-viewport プラグインを使用して自動的に計算できます。

postcss-px-to-viewport プラグインの核心は、デザイン ドラフトの幅を設定する必要があることです(これが postcss-pxtorem との違いです)。デザイン ドラフトが 375 の場合、 375 にviewportWidth設定するだけで済みます。viewportWidth、デザインドラフトが 750 の場合、viewportWidth750 に設定するだけで済みます。このように、CSS でデザイン案に従って要素の px サイズを設定するだけで、パッケージ化する際にプラグインが vw の値を自動的に計算してくれるのは素晴らしいことではないでしょうか。

// 这里是postcss-px-to-viewport插件的默认配置
{
    
    
  unitToConvert: 'px',
  viewportWidth: 320,
  unitPrecision: 5,
  propList: ['*'],
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  exclude: undefined,
  include: undefined,
  landscape: false,
  landscapeUnit: 'vw',
  landscapeWidth: 568
}
// 一般我们只需要改viewportWidth即可
{
    
    
  viewportWidth: 375,
}

postcss-px-to-viewport プラグインの Ignoring 機能を使用して、変換する必要のないプロパティをマークすることもできます。

• /* px-to-viewport-ignore */ 現在の行は変換されません
• /* px-to-viewport-ignore-next */ 次の行は変換されません

.box {
    
    
  /* px-to-viewport-ignore-next */
  width: 10px;
  height: 10px;
  padding: 10px; /* px-to-viewport-ignore */
}

レイアウトスキーム

モバイル端末の適応について話した後、モバイル。これ以上詳しくは説明しません。

数多くのレイアウトがある中で、日々の H5 開発においてこの 2 つのレイアウトは基本的に切り離せないものであるため、筆者はflexレイアウトとレイアウトをマスターする必要があると考えています。とgridに関するチュートリアルはたくさんありますが、ここではその方法を教えません。Ruan Yifeng 氏のFlex レイアウト チュートリアルとGrid グリッド レイアウト チュートリアルを読むことをお勧めします。これら 2 つの精神的な方法をマスターすれば、モバイル H5 の開発レイアウトに関しては何も難しいことはないと思います。flex布局grid布局

拡大

ウィンドウ サイズに関する一般的な API

screen.width 获取屏幕的宽度 跟浏览器无关
screen.height 获取屏幕的高度 跟浏览器无关
screen.availWidth 获取屏幕有效宽度 如果任务栏设置在左右两侧的话，去除任务栏宽度
screen.availHeight 获取屏幕有效高度 去除任务栏高度

window.outerWidth 获取浏览器宽度 包括浏览器所有包括侧边栏、窗口镶边和调正窗口大小的边框。
window.outerHeight 获取浏览器高度 包括浏览器所有包括侧边栏、窗口镶边和调正窗口大小的边框。
window.innerWidth：获取浏览器视觉视口宽度（包括滚动条）。
window.innerHeight：获取浏览器视觉视口高度（包括滚动条）。
document.documentElement.clientWidth：获取浏览器布局视口宽度。不包括滚动条。
document.documentElement.clientHeight：获取浏览器布局视口高度。不包括滚动条。

dom.clientWidth：获取元素的宽度 包括内容和内边距
dom.clientHeight：获取元素的高度 包括内容和内边距
dom.offsetWidth：获取元素的宽度 包括内容、内边距、滚动条、边框。
dom.offsetHeight：获取元素的高度 包括内容、内边距、滚动条、边框。
dom.scrollWidth：获取元素内容实际的宽度 包括内边距。
dom.scrollHeight：获取元素内容实际的高度 包括内边距。

dom.clientTop：获取元素上边框高度
dom.clientLeft：获取元素左边框宽度
dom.offsetTop：获取元素距离页面顶部高度
dom.offsetLeft：获取元素距离页面左边的宽度
dom.scrollTop：获取元素滚动条在垂直方向上滚动的距离
dom.scrollLeft：获取元素滚动条在水平方向上滚动的距离

追記

この記事は著者の個人的な研究メモです。誤りがある場合はお知らせください。よろしくお願いします。この記事が役に立ったら、いいねしてください~~