移動(dòng)端適配知識(shí)點(diǎn)梳理-part one
來(lái)源：SegmentFault思否社區(qū)
作者：wenjinhua
1. 設(shè)備像素和css像素
設(shè)備像素，又叫物理像素（physical pixel），給出您正在使用的任何設(shè)備的形式分辨率，可通過(guò)screen.width/height獲取. css像素，又叫設(shè)備獨(dú)立像素（device-indenpendent pixel），此為邏輯像素，計(jì)算機(jī)設(shè)備中的一個(gè)點(diǎn) 注意：設(shè)備像素和css像素的關(guān)系（縮小還是放大針對(duì)的是css像素）： 100％縮放：設(shè)備像素和css像素重疊 縮小：CSS像素開(kāi)始縮小，意味著一個(gè)設(shè)備像素現(xiàn)在與幾個(gè)CSS像素重疊。 放大：CSS像素開(kāi)始增長(zhǎng)，意味著一個(gè)CSS像素與幾個(gè)設(shè)備像素重疊。
2. pc端的尺寸
3. 移動(dòng)設(shè)備中的尺寸
視覺(jué)視口
布局視口
4. 理想視口
4.1 meta標(biāo)簽
meta標(biāo)簽包含有關(guān)瀏覽器和視口縮放的指令，我們可以通過(guò)它來(lái)設(shè)置布局視口的寬度。
寫(xiě)法如下：
其中：
width：設(shè)置布局視口的寬度，值可以為一個(gè)正整數(shù)或'device-width' initial-scale：設(shè)置頁(yè)面的初始縮放比例和布局視口的寬度。 minimum-scale：設(shè)置最小縮放級(jí)別 maximum-scale：設(shè)置最大縮放級(jí)別 user-scalable：是否允許用戶(hù)縮放
4.2 理想視口的概念
在移動(dòng)端，布局視口往往比視覺(jué)視口大很多，給用戶(hù)不好的體驗(yàn)。所以蘋(píng)果引入了理想視口的概念。
為瀏覽器定義的可完美適配移動(dòng)端的理想viewport,即將布局視口的寬度設(shè)置為移動(dòng)設(shè)備的屏幕寬度。
所謂完美適配需要滿(mǎn)足以下兩點(diǎn)：
不需要用戶(hù)縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容。 顯示的文字的大小在任何分辨率的屏幕下都是合適的 設(shè)置方式： width=device-width（device-width本身就是設(shè)備的屏幕寬度） 缺點(diǎn)：在iphone和ipad上，無(wú)論是豎屏還是橫屏，寬度都是豎屏?xí)rideal viewport的寬度。 initial-scale=1：該值是相對(duì)于理想視口來(lái)縮放的，值為1表明理想視口的縮放比例是100%，即就是理想視口的本身寬度。 缺點(diǎn)：IE 無(wú)論是豎屏還是橫屏都把寬度設(shè)為豎屏?xí)rideal viewport的寬度。 同時(shí)設(shè)置以上兩個(gè)屬性：分別規(guī)避了各自的缺點(diǎn)
4.2.1 詳解initial-scale
1. 設(shè)置此屬性實(shí)際上發(fā)生了兩件事兒：
它將頁(yè)面的初始縮放系數(shù)設(shè)置為相對(duì)于理想視口計(jì)算得出的定義值。因此，它會(huì)生成可視的視口寬度。 它將布局視口寬度設(shè)置為剛計(jì)算出的可視視口寬度。
2. 視覺(jué)視口和理想視口的關(guān)系如下：
可視視口寬度=理想視口寬度/縮放系數(shù) 縮放系數(shù)=理想視口寬度/可視視口寬度
(注意：當(dāng)縮放系數(shù)變大時(shí)，那么css像素會(huì)變大，導(dǎo)致視覺(jué)視口容納更少的css像素，于是視覺(jué)視口變小)
4.2.2指令沖突
當(dāng)同時(shí)設(shè)置width=device-width和initial-scale時(shí)，就會(huì)產(chǎn)生沖突，因?yàn)槎咄瑫r(shí)對(duì)布局視口的寬度進(jìn)行設(shè)置。
例如，進(jìn)行如下設(shè)置時(shí)：
initial-scale=1 告訴它將布局視口寬度設(shè)置為縱向320px和橫向480px。
width=400 告訴它在縱向和橫向中都將布局視口寬度設(shè)置為400px。
結(jié)論：瀏覽器通過(guò)遵循縱向或橫向的最大寬度來(lái)解決該問(wèn)題。在我們的示例中，縱向布局視口的寬度變?yōu)?00px（較大的為320和400），而橫向布局視口的寬度為480px（較大的為480和400）。
更多信息：github-https://github.com/wenjinhua/my-blog
參考如下：
viewport的深入理解:
https://www.cnblogs.com/2050/p/3877280.html#!comments
ppk關(guān)于視口的介紹:
https://www.quirksmode.org/mobile/viewports.html
