【移動端】基礎(chǔ)知識

像素

css中所用的“px”和移動設備的物理像素是不一樣的

  • px：CSS pixels邏輯像素，瀏覽器使用的抽象單位
  • dp,pt：device independent pixels 設備無關(guān)像素
  • dpr：devicePixelRatio 設備像素縮放比

平面上： 1px = dpr2 x dp
緯度上： 1px = 2 x dp

為什么iphone5是320px*568px?
因為：dpr=2
所以：640dp 1136dp -> 320px 568px
相當于是四個物理像素渲染一個css像素，就會更清晰

在dpr=2情況下的對比

viewport

瀏覽器默認為我們做了兩件事

  1. 頁面渲染在980px（ios的默認viewport）viewport
  2. 縮放

設計移動web為什么不使用默認的980px的布局viewport？
因為不同系統(tǒng)不同設備的默認值可能不同，而且頁面會縮小顯示，不友好，鏈接不可點，有縮放，縮放后又有滾動。
font-size為40px等于PC上12px同等物理大小，不規(guī)范

可以通過js查各種寬度屬性
document.body.clientWidth 980
window.innerWidth 1030

<!---最常用的設置-->
<meta name="viewport" conten="width=device-width,initial-scale=1,user-scale=no">
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容