移動Web開發基礎概念

 

 

  

物理像素=設備像素

css像素=邏輯像素=設備獨立像素=實際開發中使用的像素

.box{
    width:200px;
    height:100px;
}

 

 

 

設備像素比 dpr = 設備像素 / css像素 （縮放比爲1的狀況）

dpr 描述的是單方向，所以當dpr=2，意味着一個css像素由2x2個物理像素來完成

 

標清屏 dpr=1

高清屏 dpr>1

 

縮放

縮放改變的是css像素的大小

如： 縮放=1，則1css像素 = 1 物理像素

        縮放=2，則1css像素 = 2x2 物理像素

 

ppi dpi

每英寸的物理像素點

 

 

 

 

視口

默認狀況下視口寬度大約是980px，遠大於移動設備寬度

解決方法：將視口寬度調整爲設備寬度 width=device-width ，縮放比爲1 initial-scale=1，不容許用戶縮放 user-scalable=no，最大和最小縮放比爲1 maximun-scale=1,minimum-scale=1

移動端標準meta頭

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

不過即便這麼寫了，部分國外瀏覽器仍是會容許用戶進行縮放，好比ios的safari

 

經過js獲取視口相關數據

獲取視口寬度

        console.log(window.innerWidth);
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.getBoundingClientRect().width);

能夠得出兼容性寫法：

var viewWidth=document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
        console.log(viewWidth);

 

補充：screen.width 不一樣瀏覽器存在不一樣的解析，有時會獲取到設備寬度，有時獲取到css寬度，所以不建議使用

 

js獲取dpr

console.log(window.devicePixelRatio);