Mobile Development
1.0.0
画面の斜めの長さをインチで指します。一般的なサイズには、3.5インチ、4.0インチ、5.0インチ、5.5インチ、6.0インチなどが含まれます。
注：1インチ（インチ）= 2.54 cm（cm）
これは、一般的にn * mで表される水平方向と垂直方向の画面上の物理ピクセルポイントの総数を指します。例：iPhone6の画面解像度は750 * 1334です
| モデル | 解像度（物理ピクセルの合計） |
|---|---|
| iPhone 3G/3GS | 320 * 480 |
| iPhone 4 / 4s | 640 * 960 |
| iPhone 5/5s | 640 * 1136 |
| iPhone 6/7/8 | 750 * 1334 |
| iPhone 6p / 7p / 8p | 1242 * 2208 |
| iPhone X | 1125 * 2436 |
| ハウェイP30 | 1080 * 2340 |
| Hawei Mate40 | 2772 * 1344 |
| Xiaomi 10 | 2340 * 1080 |
| Xiaomi 11 | 3200 * 1440 |
また、画面ピクセル密度としても知られています。画面上の各インチに含まれる物理ピクセルポイントの数を指します。ユニットはPPI（1インチあたりのピクセル）です。実際、別のユニットDPI（インチあたりのドット）があります。 2つの値の計算方法は同じですが、使用シナリオは異なります。 PPIは主に画面を測定するために使用され、DPIは主にプリンター、プロジェクターなどを測定するために使用されます。
デバイスピクセルとも呼ばれる物理ピクセルは、長さ（PX）の単位です。物理的なピクセルは、画面上の物理イメージングポイントであり、これは小さな発光物理コンポーネント（非常に小さな電球として理解できる）であり、画面が表示できる最小粒度です。画面のピクセルポイント（解像度）の物理数は、携帯電話画面の重要なパラメーターであり、スクリーンメーカーによって決定され、生産後に変更することはできません。たとえば、iPhone6が水平方向に持っている物理ピクセルは750であり、垂直方向にある物理ピクセルは1334で、これは750*1334で表されます。
CSSピクセルは、次のようにも知られています。論理ピクセル。 CSSピクセルは長さの抽象単位であり、ユニットもPXです。 Web開発者がWebページのコンテンツサイズを正確に測定するために作成されます。 CSSピクセルを使用して、css js lessを書き込みます。
デバイスに依存しないピクセルは、DIPまたはDP（デバイス非依存ピクセル）と呼ばれ、スクリーン密度非依存ピクセルとも呼ばれます。
はじめに：[HDスクリーン]が表示されなかった時代、1 CSSピクセルは1つの物理ピクセルに対応しますが、[HDスクリーン]の出現以来、2つはもはや1対1の関係ではありません。 2010年、Appleは新しいディスプレイ標準を起動しました。より多くの物理的なピクセルポイントを画面に圧縮し、画面サイズが変化しないため、解像度が高くなり、ディスプレイ効果がより良く繊細になります。 Appleはこの画面を呼び出します： Retina Screen（Retina Screenとも呼ばれます） 、同時に、この画面を備えたEpoch Making Digital製品 - iPhone 4を起動しました。
プログラマーは次のように書いています：width = 2px、height = 2pxボックス。 iPhone3g/sの画面サイズとiPhone4の画面サイズがiPhone4のそれと同じであるため、CSSピクセルが1つの物理ピクセルに直接対応する場合、iPhone4の画面はより多くの物理ピクセルに対応できるため、iPhone4の物理ピクセルはiPhone3g/sの物理ピクセルよりもはるかに小さくなります。理論的には、このボックスはiPhone3g/s画面よりもiPhone4画面ではるかに小さくなります。実際、iPhone3g/sはiPhone4と同じサイズです！ ！ ！ 、しかし、iPhone 4はより繊細で明確です。それをする方法は？これは、デバイスの独立したピクセルに依存します。 
デバイスの独立したピクセルの出現により、要素は[HD画面]でも通常のサイズを備えています。 Sは、コードをデバイスの影響を受けません。画面の特性に従ってデバイスメーカーによって設定されており、変更することはできません。
ピクセル比（DPR、デバイスピクセル比）：単一方向の[物理ピクセル]と[デバイス独立ピクセル]の比率。つまり、 DPR =物理ピクセル/デバイス独立したピクセル
| モデル | 解像度（物理ピクセルの合計） | デバイス独立したピクセル（ディップまたはDP） | ピクセル比（DPR） |
|---|---|---|---|
| iPhone 3G/3GS | 320 * 480 | 320 * 480 | 1 |
| iPhone 4 / 4s | 640 * 960 | 320 * 480 | 2 |
| iPhone 5/5s | 640 * 1136 | 320 * 568 | 2 |
| iPhone 6/7/8 | 750 * 1334 | 375 * 667 | 2 |
| iPhone 6p / 7p / 8p | 1242 * 2208 | 414 * 736 | 3 |
| iPhone X | 1125 * 2436 | 375 * 812 | 3 |
https://uiiiiii.com/screen/index.htm
ビットマップとベクトル図
ビット画像ピクセルも長さの単位です。ビット画像ピクセルは、ビットマップの最小単位であるビットマップの「小さなグリッド」として理解できます。
現在、ロゴのみを高解像度で表示する必要があるか、問題を解決するためにSVG形式のロゴを提供できます。それ以外の場合、メディアクエリが使用されます。
@media screen and ( -webkit-min-device-pixel-ratio : 2 ) {
. logo {
content : url (.. / imgs / logo@ 2 x.jpg)
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ) {
. logo {
content : url (.. / imgs / logo@ 3 x.jpg)
}
}PC側では、ビューポートのデフォルト幅は、ブラウザウィンドウの幅と同じです。 CSS標準ドキュメントでは、ビューポートは次のように呼ばれます。最初はブロックを含みます。これは、すべてのCSSパーセンテージ幅計算の根本原因です。 PC側では、幅を次の方法で取得できます。
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; モバイルデバイスでは、ブラウザのメーカーは比較的大きな問題に直面しています。水平スクロールバーなしで完全にモバイルデバイスに数千万個、さらには数億個のPC Webページをどのように提示しますか？次に、モバイルターミナルの3つの概念を紹介する必要があります。1 。レイアウトビューポート、2。ビジュアルビューポート、3。理想的
携帯電話での初期ページディスプレイの問題を解決するために使用されます。初期の頃、私たちはこれを行いました：PC Webページの幅は一般的に：960pxです1024pxの範囲は、この範囲を超えていても960pxを超えています1024pxエリアはまだ本体の位置です。
ブラウザメーカーは、モバイルデバイス用のコンテナを設計しています。まず、このコンテナを使用して、WebページをPCに保持します。この容器の幅は通常980pxです。デバイスによって異なる場合がありますが、違いは大きくありません。次に、コンテナは携帯電話と同じ幅に等しく比例して圧縮されるため、スクロールバーがなく、ページを完全に表示できます。ただし、これを行うにはまだ問題があります。Webページのコンテンツは小さすぎて、ユーザーエクスペリエンスに深刻な影響を与えます。
モバイルターミナルでレイアウトビューポートを取得する方法： document.documentElement.clientWidth （通常980px、iPad proは1024px）
注：レイアウトビューポートが圧縮された後、レイアウトビューポートが圧縮され、傍受されないため、水平幅は375pxではなく980pxになります。
ビジュアルビューポートは、ユーザーに見える領域です。その絶対幅は常にデバイス画面と同じくらい広いですが、この幅に含まれるCSSピクセルの値は異なります。たとえば、一般的に、携帯電話は980 CSSピクセルをVisual Viewport （Visual Viewport Size = Layout ViewPortサイズ）に入れ、iPad Proは1024 CSSピクセルをVisual Viewportに入れます。
モバイル端末のビジュアルビューポートを取得する方法： window.innerWidthですが、Android 2、Opera Mini、およびUC8では正しく取得することはできません。 （一般的に、ビジュアルビューポートはコードを通じて表示されません）
iPhone 6を例にとる場合は、画面を説明してください。
画面の幅（DP/DIP）に等しいレイアウトビューポートは理想的なビューポートと呼ばれるため、理想的なビューポートは標準であると言えます。レイアウトビューポート幅と画面（DP/DIP）はメタタグによって達成されます。
理想的なビューポートを設定するための具体的な方法：
< meta name =" viewport " content =" width=device-width " >【要約】：
1.説明画面：物理ピクセル：750p×、デバイス独立ピクセル：375px、CSSピクセル：980px。 2.利点：異なるデバイスに対する要素のレンダリング効果は、200幅のボックスなどのレイアウトコンテナによってスケーリングされるため、ほぼ同じです。
1.説明画面：物理ピクセル：750px、デバイス独立ピクセル：375px、CSSピクセル：375px。 2.利点：ページが明確に表示され、コンテンツは観察するのが難しくなく、ユーザーエクスペリエンスが優れています。 3。短所：同じ要素は、異なる画面（デバイス）に異なるレンダリング効果を持っています。たとえば、375全体のボックス：375/375および375/414（同等のディスプレイではありません）。 4。それを解決する方法：適応をする。
ズームインするとき：
サイズを減らす：
アルゴリズムプロセス：拡大するとき、ブラウザは特定の割合の領域を内側にインターセプトし、すぐに残りの画像をビューポート全体に等しい割合で埋め、置くことができない要素が自動的にラップされます。
監視スクリプト：
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} ズームインするとき：
注：レイアウトビューポートのサイズがスケーリング中に変更されないため、モバイルスケーリングはページレイアウトに影響しません。
メタビューポートタグは、モバイルレイアウトビューポートを制御するために2007年にAppleによって導入され、980レイアウトビューポートの業界ルールを変更しようとしました。ビューポート関連オプション：
幅の値はデバイスの幅または特定の値になる可能性がありますが、一部のAndroid電話は特定の値をサポートしておらず、完全なiOSシリーズはサポートしています
width=device-width, initial-scale=1.0一緒に書き込まれます。ユーザースケーリングに許容される最大スケール[Safariはサポートしません]最大スケール=画面幅（DIP独立ピクセル、DIP） / Visual Viewport幅
ユーザーが最小スケール=画面幅（DIP独立ピクセル、ディップ） /ビジュアルビューポート幅をスケーリングできるようにする最大スケール
ユーザーが指を介してページをズームできるようにするかどうか[Safariはサポートしていません]
カバーする設定は、[ノッチスクリーン]のホワイトスペースの問題を解決できます
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover " >1.なぜ適応する必要があるのですか？モバイルデバイスの画面サイズが異なるため、同じ要素が2つの異なる携帯電話（異なる割合）に異なる効果を示します。同じ要素が異なるデバイスに表示されている場合は、適応する必要があります。どの適応方法が使用されても、中心原理は常に次のとおりです。
3つの主流の適応方法があります。
EMとREMはどちらもCSSの長さ単位です。どちらも相対長ユニットですが、2つは少し異なります
理想的なビューポートでは、デザインドラフト（DIPは375px）が標準として使用され、ルートフォントは他のデバイスのDIPに合わせて100pxです。
理想的なビューポートでは、ルートフォントをDIP/10に設定します。つまり、DIPを10 REMと比較して、いくつの内部要素が占有されていますか
1 VW =レイアウトビューポート幅の1％VH =レイアウトビューポートの高さの1％
互換性の表示：caniuse.com
HD画面の1pxは、より多くの物理ピクセル（小さな電球）に対応するため、1ピクセルの境界線が厚く見えます。解決策は次のとおりです。
@media screen and ( -webkit-min-device-pixel-ratio : 2 ){
# demo {
border : solid 0.5 px black;
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ){
# demo {
border : solid 0.333 px black;
}
}モバイルイベントリスト
上記のイベントは、開発者にいくつかの特別な情報を伝えるためにiOS Safariに最初に登場しました
知らせ：
タッチイベントが終了すると、要素のクリックイベントがデフォルトでトリガーされます。完璧なビューポートが設定されていない場合、イベントの時間間隔は約300ミリ秒です。完璧なビューポートが設定されている場合、時間間隔は約30ミリ秒です（特定のデバイスの特性によって異なります）。
タッチイベントが要素を非表示にすると、クリックアクションがその背後にある要素に作用し、新しい要素のクリックイベントまたはページジャンプをトリガーします。この現象はクリック侵入と呼ばれます。
デフォルトの動作をブロックします
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) 舞台裏の要素にクリック特性がないようにし、それらを通常のDivタグに変更します。
< div id =" baidu " >点我去百度</ div >TouchEndイベントを使用して、クリックして新しいWebページにジャンプします
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) CSSのポインターイベント属性を使用して、クリックイベントを一時的に失い、300ミリ秒後に復元します。
# baidu {
display : block;
width : 100 % ;
height : 300 px ;
background-color : skyblue;
pointer-events : none;
} btn . addEventListener ( 'touchend' , ( ) => {
shade . style . display = 'none'
setTimeout ( ( ) => {
baidu . style . pointerEvents = 'auto' // 恢复正常
} , 300 ) ;
} ) 隠された要素を隠す前に約300ミリ秒遅れさせます
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
