移動端適配知識點梳理-part one

時間 2020-09-10

標籤移動適配知識梳理欄目無線简体版

原文原文鏈接

1. 設備像素和css像素

設備像素，又叫物理像素（physical pixel），給出您正在使用的任何設備的形式分辨率，可經過screen.width/height獲取.
css像素，又叫設備獨立像素（device-indenpendent pixel），此爲邏輯像素，計算機設備中的一個點
注意：設備像素和css像素的關係（縮小仍是放大針對的是css像素）：javascript
- 100％縮放：設備像素和css像素重疊
- 縮小：CSS像素開始縮小，意味着一個設備像素如今與幾個CSS像素重疊。
- 放大：CSS像素開始增加，意味着一個CSS像素與幾個設備像素重疊。

2. pc端的尺寸

	屏幕尺寸	窗口尺寸	滾動偏移	視口(佈局視口)	html元素	事件座標
概念	指顯示器的屏幕尺寸，和顯示器有關，和瀏覽器無關	瀏覽器窗口的尺寸，包含滾動條	頁面的滾動偏移量	網站的最上方包含的塊，用來約束<html>元素（不包含滾動條）		發生鼠標事件時，將公開很多於五個屬性對，以提供有關事件確切位置的信息
獲取方式	screen.width/height	window.innerWidth/height	window.pageX/YOffset	document.documentElement.clientWidth	document.documentElement.offsetWidth
像素單位	設備像素	css像素	css像素	css像素	css像素
其餘說明		窗口的內部寬度以CSS像素爲單位，計算時須要知道將多少css像素包含在瀏覽器窗口中。所以，若是用戶放大，則窗口中的可用空間會減小		視口不受CSS影響。它只是在桌面上具備瀏覽器窗口的寬度和高度。在移動設備上，它要複雜得多。		1. pageX/Y給出相對於html的座標（css像素） 2. clientX/Y給出相對於視口的座標（css像素） 3. screenX/Y給出相對於屏幕的座標（設備像素）

3. 移動設備中的尺寸

	屏幕尺寸	視覺視口	佈局視口	滾動偏移	html元素	事件座標
概念	移動設備的屏幕尺寸	在屏幕上顯示的頁面的一部分。用戶能夠滾動以更改其看到的頁面部分，或縮放以更改可視視口的大小。	css佈局所依賴的視口，比視覺視口要寬，而且不一樣瀏覽器的佈局視口不一樣。	視覺視口相對於佈局視口的位置		同web端
獲取方式	screen.width/height	document.documentElement.clientWidth	window.innerWidth/Height	window.pageX/YOffset	document.documentElement.offsetWidth/Height
像素單位	設備像素	css像素	css像素	css像素	css像素
其餘說明		當用戶放大或縮小時，視覺視口的尺寸會發生變化，由於屏幕上會容納更多或更少的CSS像素				1. pageX/Y給出相對於html的座標 2.clientX/Y相對於可視視口 3.screenX/Y是相對於屏幕

視覺視口

佈局視口

4. 理想視口

4.1 meta標籤

meta標籤包含有關瀏覽器和視口縮放的指令，咱們能夠經過它來設置佈局視口的寬度。css

寫法以下：html

<meta name =「 viewport」 content =「名稱=值，名稱=值」>

其中：java

width：設置佈局視口的寬度，值能夠爲一個正整數或'device-width'
initial-scale：設置頁面的初始縮放比例和佈局視口的寬度。
minimum-scale：設置最小縮放級別
maximum-scale：設置最大縮放級別
user-scalable：是否容許用戶縮放

4.2 理想視口的概念

在移動端，佈局視口每每比視覺視口大不少，給用戶很差的體驗。因此蘋果引入了理想視口的概念。git

爲瀏覽器定義的可完美適配移動端的理想viewport,即將佈局視口的寬度設置爲移動設備的屏幕寬度。github

所謂完美適配須要知足如下兩點：

不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容。
顯示的文字的大小在任何分辨率的屏幕下都是合適的

設置方式：

width=device-width（device-width自己就是設備的屏幕寬度）
缺點：在iphone和ipad上，不管是豎屏仍是橫屏，寬度都是豎屏時ideal viewport的寬度。
initial-scale=1：該值是相對於理想視口來縮放的，值爲1代表理想視口的縮放比例是100%，即就是理想視口的自己寬度。
缺點：IE 不管是豎屏仍是橫屏都把寬度設爲豎屏時ideal viewport的寬度。
同時設置以上兩個屬性：分別規避了各自的缺點

4.2.1 詳解initial-scale

1. 設置此屬性實際上發生了兩件事兒：web

它將頁面的初始縮放係數設置爲相對於理想視口計算得出的定義值。所以，它會生成可視的視口寬度。
它將佈局視口寬度設置爲剛計算出的可視視口寬度。

2. 視覺視口和理想視口的關係以下：瀏覽器

可視視口寬度=理想視口寬度/縮放係數
縮放係數=理想視口寬度/可視視口寬度

(注意：當縮放係數變大時，那麼css像素會變大，致使視覺視口容納更少的css像素，因而視覺視口變小)iphone

4.2.2指令衝突

當同時設置width=device-width和initial-scale時，就會產生衝突，由於兩者同時對佈局視口的寬度進行設置。ide

例如，進行以下設置時：

<meta name =「 viewport」 content =「 initial-scale = 1，width = 400」>

initial-scale=1 告訴它將佈局視口寬度設置爲縱向320px和橫向480px。
width=400 告訴它在縱向和橫向中都將佈局視口寬度設置爲400px。

結論：瀏覽器經過遵循縱向或橫向的最大寬度來解決該問題。在咱們的示例中，縱向佈局視口的寬度變爲400px（較大的爲320和400），而橫向佈局視口的寬度爲480px（較大的爲480和400）。

更多信息：github

參考以下：

相關標籤/搜索

每日一句

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