Mobile Development
1.0.0
指屏幕對角線長度，單位是英寸（inch）。常見尺寸有：3.5寸、4.0寸、5.0寸、5.5寸、6.0寸等等。
備註：1英寸（inch）= 2.54 厘米（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 |
| HAWEI P30 | 1080 * 2340 |
| HAWEI Mate40 | 2772 * 1344 |
| 小米10 | 2340 * 1080 |
| 小米11 | 3200 * 1440 |
又稱：屏幕像素密度，是指屏幕上每英寸裡包含的物理像素點個數，單位是ppi（pixels per inch），其實這裡還有另一個單位dpi （dots per inch)，兩個值的計算方式都一樣，只是使用的場景不同。 ppi主要用來衡量屏幕， dpi主要用來衡量打印機、投影儀等。
物理像素又名：設備像素，是一個長度單位（px）。一個物理像素就是屏幕上的一個物理成像點，就是屏幕中一個微小的發光物理元器件（可簡單理解為超級微小的燈泡），是屏幕能顯示的最小粒度。屏幕的物理像素點數（分辨率）是手機屏幕的一個重要參數，由屏幕製造商決定，屏幕生產後無法修改。例如iPhone6 橫向上擁有的物理像素為750、縱向上擁有的物理像素為1334，用750*1334表示。
css像素又名：邏輯像素，css像素是一個抽象的長度單位，單位也是px，它是為Web開發者創造的，用來精確地度量Web頁面上的內容大小。我們在編寫cssjsless中所使用的都是css像素。
設備獨立像素簡稱DIP或DP（device-independent pixel），又稱：屏幕密度無關像素。
引言：在沒出現【高清屏】的年代，1個css像素對應1個物理像素，但自從【高清屏】問世，二者就不再是1對1的關係了。蘋果公司在2010年推出了一種新的顯示標準:在屏幕尺寸不變的前提下，把更多的物理像素點壓縮至一塊屏幕裡，這樣分辨率就會更高，顯示效果就會更佳細膩。蘋果將這種屏幕稱為: Retina屏幕（又名:視網膜屏幕） ，與此同時推出了配備這種屏幕的劃時代數碼產品—iPhone4。
程序員寫了: width=2px， height=2px的盒子，若1個css像素直接對應1個物理像素，由於iPhone3G/S與iPhone4屏幕尺寸相同，但iPhone4的屏幕能容納下更多的物理像素點，所以iPhone4的物理像素點比iPhone3G/S小很多，那麼理論上這個盒子在iPhone4屏幕上也就會比iPhone3G/S屏幕上小很多，而事實是iPhone3G/S和iPhone4下這個盒子是一樣大的！ ！ ！ ，只不過iPhone4更加細膩、清晰。如何做到的呢？這就要靠設備獨立像素。 
設備獨立像素的出現，使得即使在【高清屏】上元素也可以擁有正常的尺寸，s讓代碼不受到設備的影響，它是設備廠商根據屏幕特性設置的，無法更改。
像素比（dpr，device pixel ratio）：單一方向上，【物理像素】和【設備獨立像素】的比值。即： dpr = 物理像素/ 設備獨立像素
| 型號 | 分辨率（物理像素點總和） | 設備獨立像素（dip或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://uiiiuiii.com/screen/index.htm
位圖和矢量圖
位圖像素也是一個長度單位，位圖像素可以理解為位圖中的一個“小格子”，是位圖的最小單元。
目前一般僅logo需要做高清顯示，或提供svg格式logo即可解決問題，否則採用媒體查詢：
@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端網頁完整的呈現在移動端設備上，並且不會出現橫向滾動條呢？那就要引出移動端的三個概念: 1.佈局視口、2.視覺視口、3.理想視口
用於解決早期的頁面在手機上顯示的問題，早期的時候我們這樣做:pc端網頁寬度一般都為:960px 1024px這個範圍，就算超出了該範圍，960px 1024px這個區域也依然是版心的位置。
瀏覽器廠商針對移動端設備設計了一個容器，先用這個容器去承裝PC端的網頁，這容器的寬度一般是980px ，不同的設備可能有所差異，但相差並不大;隨後將這個容器等比例壓縮到與手機等寬，這樣就可以保證沒有滾動條且能完整呈現頁面，但是這樣做依然有問題:網頁內容被壓縮的太小，嚴重影響用戶體驗。
移動端獲取佈局視口的方式： document.documentElement.clientWidth (一般都是980px，iPad Pro是1024px)
注意：佈局視口經過壓縮後，橫向的寬度用css像素表達就不再是375px了，而是980px，因為佈局視口是被壓縮，而不是截取。
視覺視口就是用戶可見的區域，它的絕對寬度永遠和設備屏幕一樣寬，但是這個寬度裡所包含的css像素值是變化的，例如:一般手機會將980個css像素放入視覺視口中（視覺視口大小=佈局視口大小） ，而ipad Pro會將1024個css像素放入視覺視口中。
移動端獲取視覺視口方式: window.innerWidth ，不過在Android2、 Opera mini、UC8中無法正確獲取。 （一般也不通過代碼看視覺視口）
如果以iPhone6為例，描述一下屏幕：
與屏幕（設備獨立像素，dp/dip）等寬的佈局視口，稱之為理想視口，所以也可以說理想視口是一種標準:讓佈局視口寬與屏幕等寬（設備獨立像素），靠meta標籤實現。
設置理想視口的具體方法:
< meta name =" viewport " content =" width=device-width " >【總結】:
1.描述屏幕:物理像素:750p×、設備獨立像素:375px、css像素:980px。 2.優點:元素在不同設備上，呈現效果幾乎一樣，因都是通過佈局容器等比縮放的，例如200寬的盒子: 200/980 3.缺點:元素太小，頁面文字不清楚，用戶體驗不好。
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 )
} 放大時：
注意：移動端縮放不會影響頁面佈局，因為縮放的時候，佈局視口大小沒有變化。
meta-viewport標籤是蘋果公司在2007年引進的，用於移動端佈局視口的控制，企圖改變980佈局視口的行業規則。 viewport相關選項：
width值可以是device-width，也可以是具體值，但有些安卓手機不支持具體值，IOS全系列支持
width=device-width, initial-scale=1.0一起寫。允許用戶縮放的最大比例【safari不支持】 maximum-scale = 屏幕寬度（設備獨立像素，dip）/ 視覺視口寬度
允許用戶縮放的最大比例minimum-scale = 屏幕寬度（設備獨立像素，dip）/ 視覺視口寬度
是否允許用戶通過手指縮放頁面【safari不支持】
設置為cover可以解決【劉海屏】的留白問題
< 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 " >一、為什麼要做適配？ 由於移動端設備的屏幕尺寸大小不一，會出現:同一個元素，在兩個不同的手機上顯示效果不一樣（比例不同）。要想讓同一個元素在不同設備上，顯示效果一樣，就需要適配，無論採用何種適配方式，中心原則永遠是:等比！
主流的適配方式有三種：
em和rem都是css中的長度單位。而且兩個都是相對長度單位，不過兩個有點區別
理想視口下，以設計稿（dip為375px）為標準，根字體設計為100px，來匹配其它設備的dip
理想視口下，根字體設為dip/10，即把dip比作10份rem，考慮內部元素的佔多少rem
1 vw = 佈局視口寬度的1% 2 vh = 佈局視口高度的1%
查看兼容性： caniuse.com
高清屏幕下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中，為了向開發人員轉達一些特殊的信息
注意：
touch事件結束後會默認觸發元素的click事件，如果沒有設置完美視口，則事件觸發的時間間隔為300ms左右，如設置完美視口則時間間隔為30ms左右（視具體設備特性而定）。
如果touch事件導致隱藏了元素，則click動作將作用到背後的元素上，觸發新元素的click事件或頁面跳轉，此現象稱為點擊穿透。
阻止默認行為
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) 讓背後元素不具備click特性，修改為普通div標籤:
< div id =" baidu " >点我去百度</ div >利用touchend事件，點擊跳轉新網頁
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) 利用css中的pointer-events屬性讓背後的元素暫時失去click事件，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 ) ;
} ) 
