移動Web開發基礎概念

 

 

  

物理像素=設備像素css

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

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

 

 

 

設備像素比 dpr = 設備像素 / css像素 (縮放比爲1的狀況)瀏覽器

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

 

標清屏 dpr=1scala

高清屏 dpr>1code

 

縮放blog

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

如: 縮放=1,則1css像素 = 1 物理像素get

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

 

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);

相關文章
相關標籤/搜索