移動端適配方案總結(-)

時間 2019-11-11

標籤移動適配方案總結欄目無線简体版

原文原文鏈接

基本概念：

viewport視口

瀏覽器的窗口。viewport與跟viewport有關的meta標籤的關係，詳細建議讀一讀這篇文章：移動前端開發之viewport的深刻理解，viewport與佈局的關係，能夠看下這篇文章：在移動瀏覽器中使用viewport元標籤控制佈局html

visual viewport 可見視口屏幕寬度
layout viewport 佈局視口 DOM寬度
ideal viewport 理想適口：使佈局視口就是可見視口前端

設備寬度(visual viewport)與DOM寬度(layout viewport), scale的關係爲：git

（visual viewport）= （layout viewport）* scale

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

　　設備像素比dpr(device pixel ratio)

　　設備像素比（1/scale）＝物理像素 / 設備獨立像素github

　　viewport中的scale和dpr是倒數關係。
　　獲取當前設備的dpr：web

JavaScript: window.devicePixelRatio。

CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio。不一樣dpr的設備，可根據此作一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。

　　設備獨立像素dip或dp

　　dip或dp,（device independent pixels，設備獨立像素）與屏幕密度有關。dip能夠用來輔助區分視網膜設備仍是非視網膜設備。瀏覽器

安卓設備根據屏幕像素密度可分爲ldpi、mdpi、hdpi、xhdpi等不一樣的等級。規定以160dpi爲基準，1dp=1px。若是密度是320dpi，則1dp=2px，以此類推。
IOS設備：從IPhone4開始爲Retina屏ide

CSS像素與設備獨立像素之間的關係依賴於當前的縮放等級。

　　物理像素(physical pixel)

物理像素又被稱爲設備像素，他是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設備以多少物理像素來顯示一個CSS像素，也就是說，多倍屏以更多更精細的物理像素點來顯示一個CSS像素點，在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的倒是4個物理像素。佈局

　　CSS像素

　CSS像素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，CSS像素稱爲與設備無關的像素(device-independent pixel)，簡稱DIPs。CSS像素顧名思義就是咱們寫CSS時所用的像素。idea

　　屏幕像素密度PPI(pixel per inch)

屏幕像素密度是指一個設備表面上存在的像素數量，它一般以每英寸有多少像素來計算(PPI)。屏幕像素密度與屏幕尺寸和屏幕分辨率有關，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。spa

屏幕密度 = 對角線分辨率/屏幕尺寸

概念關係圖

　　　　　　　　　　　　　　　　　屏幕尺寸、屏幕分辨率-->對角線分辨率/屏幕尺寸-->屏幕像素密度PPI | 　　　　　　　　　　　設備像素比dpr = 物理像素 / 設備獨立像素dip(dp) | viewport: scale | CSS像素px

　　rem(一個CSS單位)

　　定義：font size of the root element.

不一樣的是em是相對於父元素，而rem是相對於根元素。rem定義是根元素的font-size, 以rem爲單位，其數值與px的關係，需相對於根元素<html>的font-size計算

瀏覽器默認 1rem = 16px

動態設置根元素fontSize

根元素fontSize公式：width/fontSize = baseWidth/baseFontSize

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。