移動端Web開發基礎概念

　　學到Vue開發發現裏面好多移動端的知識，例如vw、rem等，作項目也受影響，因此特地回來補

 

基本概念

物理像素

　　咱們通常手機購買的時候都會說「分辨率」，例如iPhone6的是375*667，也就是水平方向375個像素點，豎直方向667個像素點

　　這裏的「像素點」實際上是一個基本單位，即物理像素，也叫設備像素（device pixel，dp），設備經過控制這些點的明暗以及顏色，從而顯示出咱們須要的圖像

　　可是這個「像素點」有個問題，也就是不一樣設備上的「像素點大小」不一致，這就形成了不一樣設備上圖像雖然像素都是同樣的，可是顯示的樣子會有差別

　　不過這個物理像素不是實際開發中使用的

CSS像素

　　顧名思義，在寫CSS時用到的像素，也叫邏輯像素/設備獨立像素（device independent pixel，dip），也就是和設備無關的一個單位

　　CSS像素是在實際開發中使用的像素

　　前面在物理像素中，咱們說到設備的分辨率的不一樣，會致使圖片的顯示有所區別，例以下圖，一樣是一個像素，標清手機和高清手機的「像素點大小」是不一致的，所以須要系統介入，把標清中的1個「像素點」和高清中的4個「像素點」都統一用同樣的單位來表示（例如1px），這樣一來，圖片顯示的效果就同樣了

　　

設備像素比

　　即device pixel ratio（dpr），設備像素和CSS像素的一個比值（縮放比爲1）

　　上圖中標清手機屏的dpr爲1（1個設備像素對應一個CSS像素），而高清手機屏的dpr爲2（一個方向上，2個設備像素對應一個CSS像素，也能夠理解成一個CSS像素用2×2的設備像素點繪製）

　　所以能夠用dpr判斷設備的清晰程度（大於1的爲高清）

縮放

　　設備上能夠用雙擊/手指划來放大/縮小，這裏縮放變化的是CSS像素大小（即幾個物理像素對應一個CSS像素）

PPI

　　每英寸上的物理像素點（pixels per inch），密度越大，顯示越爲精細

 

視口

　　viewport，是特屬於移動端的一個概念，咱們能夠理解成「屏幕正常狀況下能夠看見的最大範圍」

　　例如PC端中，有些瀏覽器會把窗口的寬度設置成980px，但這樣的大小的區塊，在375px的移動端設備上是不能顯示完整的（除非用橫向滾動條），所以移動端設備會把這個980px的區塊按比例縮小到375px，其中的圖片也是等比例縮放的，這就形成了PC端的網頁在移動端打開時模塊太小的問題

　　所以，須要設置視口，讓內容在移動端正常顯示

　　視口的設置在header中的meta標籤裏，name屬性設置爲viewport（視口），width屬性能夠寫死（例如適配iPhone6的爲375），也能夠寫device-width，用來適應不一樣設備的視口寬度

　　

縮放比

　　這裏也能夠設置初始的縮放比，通常爲1（瀏覽器縮放比是有限制的，但通常5之內不成問題）

　　

　　若是放大，CSS像素數量變少，例如原先375px寬的圖片，在2倍縮放比下，其寬度變成187px

　　雖然設置width屬性和初試縮放比的效果一致，但爲了適應不一樣設備，兩個同時寫上

用戶縮放

　　咱們也能夠添加user-scalable屬性來設置是否容許用戶縮放

　　

　　或者設置上最大和最小的縮放比爲相同的數值（例如1），來封死用戶的縮放可能

　　

　　可是仍是考慮兼容性，把user-scalable屬性以及zvda/最小縮放比這幾個屬性所有寫上

　　不過一些國外的瀏覽器，即便你寫了不能夠縮放，用戶仍是能夠實現縮放（例如Safari）

JS獲取參數

　　在JS中，能夠用window.innerWidth來獲取當前設備的視口寬度

　　也能夠經過document.documentElement.clientWidth來獲取

　　或者用document.documentElement.getBoundingClientRect().width獲取

　　固然，爲了考慮兼容性問題，通常會同時把這三者寫上，用邏輯或來進行判斷

　　須要注意screen對象的width屬性，有時候能夠正常獲取視口寬度，但有時候會獲取到分辨率（物理像素），所以通常不使用

　　

　　dpr能夠用window下的devicePixelRatio屬性來獲取