關於螢幕適配

普通顯示屏：舊手機，iphone3，在螢幕上能看到物理畫素點

iphone3和iphone4的螢幕寬度都是320px。對於物理畫素，前者320*280，而後者640*960。後者的畫素密度更大，以至於肉眼基本看不到畫素點了。

對於普通顯示屏，1px對應乙個畫素點。高畫質顯示屏內1px對應2個畫素點了；高畫質的螢幕，如iphone6plus，1px對應3個畫素點。這種對應關係，有個名詞來形容，物理畫素比，dpr。

iphone4的大小是320*480，這裡說的尺寸是px。**查詢判斷的device-width也是px為單位的

dpr代表每一px要對應多少個物理畫素點，如對於2dpr的螢幕，乙個1px*1px的div，就需要占用4（2*2）個物理畫素點。這樣做的好處是px在不同dpr（解析度）的裝置上顯示的視覺距離是一致的，所以px也稱裝置獨立畫素。換句話說就是：固定px的同一元素，在不同裝置上所顯示出的大小都是一致的！

1px對應乙個位影象素，最好的顯示效果是乙個位影象素顯示乙個物理畫素上。但是不同dpr的手機，單位px對應不同的物理畫素。顯示在2dpr的裝置時，的每1個位影象素會被拆分成4（2*2）個物理畫素來顯示，拆分的方式是4個物理畫素會顯示1個原位影象素的鄰近色，這會導致顯示模糊。如何能讓乙個位影象素對應乙個物理畫素呢？

對於dpr2的手機使用兩倍圖（@2x）。如的尺寸為40px*60px（位圖畫素點為40*60），顯示到20px*30px的地方上（對應螢幕20*2*30*2的物理畫素點），剛好一對一。

對於按照原尺寸顯示（不控制的顯示尺寸，2dpr下顯示2倍圖，3dpr下顯示3倍圖），通過viewport的initial-scale來設定整體縮放，也就是說通過螢幕的dpr來動態設定這個值（對於2dpr則scale：0.5，3dpr則scale：0.333），這是一種viewport的非標準化設定，**的頁面就是這樣做的。因為scale會作用與整個頁面，所以一般要配合rem布局，如3dpr下，font-size設定為3倍，這樣頁面對應的尺寸就都是3倍了，然後再通過scale縮小回去，這樣頁面內容就正常了，而且也沒問題

這個方式總結下來就是：rem整體放大，然後原圖顯示，不控制尺寸，渲染到viewport上就是頁面整體都是放大的，接著將viewport縮小回原尺寸。而且這個方案同時解決了1px border問題。

沒有做螢幕適配的頁面是僅僅加了一句標準的viewport設定而已（width=device-width，scale=1），這句設定讓頁面能以比較好的效果（不縮小）顯示到移動裝置上，但沒辦法統一不同尺寸裝置下的頁面布局效果。舉個栗子：首頁併排顯示了兩張，第二張大概只顯示了1/5 。如何在不同的裝置下都做到這樣的效果？回顧以上一句結論：「固定px的同一元素，在不同裝置上所顯示出的大小都是一致的！」，所以在iphone4上如果實現了這樣的效果，但在iphone6上，第二張可能就顯示了1/2了。為了在不同的裝置上顯示的效果一致，所以我們要做螢幕適配。

現實中實際上做了一種妥協：不同裝置的寬高比例都是不同的，所以在x軸上做到了適配，在y軸上就做不到適配，除非改變頁面元素的寬高比例（如正方形變成長方形），但一般不會這麼做。所以所說的適配都是指寬度或者說x軸方向、水平方向上的布局適配。

總結以上螢幕適配的要求：1. x軸上布局一致，2.元素的寬高比例不能發生變化。

因為不同裝置的寬度不同，所以要實現以上兩點，就要求頁面內的尺寸不能寫死，而是都要跟裝置的寬度相關聯，也就是說不同寬度的裝置下元素顯示的大小必定不一致。

理想的情況下是我們根據一張設計稿，做出了乙個頁面，這個頁面在所有的移動端裝置下顯示，都滿足以上的適配要求。

換另乙個角度來思考以上這個理想情況：我們的頁面是一張寬高比例固定的向量圖（中的布局效果是對應設計稿的），等比例縮放這個向量圖放在不同的裝置下顯示（的寬度與裝置的寬度剛好一致），這也滿足了我們上面說的適配要求。這個過程中有兩個問題需要解決：

1. 如何把頁面抽象成一張寬高比例固定的向量圖（元素在寬度為n的螢幕上顯示，尺寸為k；在寬度為2n的螢幕則尺寸為2k）？

2. 怎麼知道在不同裝置下，這個該縮小或擴大多少，才與裝置的寬度剛好一致？

解決以上兩個問題，螢幕適配就做好了。

頁面內的元素也要求等比例縮放，目前我知道的也就是用rem，所以所有元素的尺寸都使用rem作為單位，然後使用js獲取裝置的寬度，比上設計稿的寬度，得出乙個比例係數，根據這個比例係數來調整font-size，從而改變rem即可。

總結這種方式就是：元素的尺寸（或者距離）與當前開發機的螢幕寬度的比例關係（通過scss來輔助計算），要記錄到css中，然後通過js獲取寬度設定html標籤的font-size上，即實現等比例縮放頁面。

對於字型、1px border 額外處理，其他與布局搭配的還有：flex伸縮容器、流式布局（百分比布局），bootstrap柵格系統響應式布局、**查詢等

設計師想要的1px，對於我們來說是1物理畫素點的意思。在retain（2dpr）裝置下，我們直接寫1px，會對應y方向2個物理畫素點（x方向不討論），但設計師想要的是1物理畫素點，所以和以上高畫質解決方案一樣，我們需要把元素縮小，進行y方向的0.5倍縮小（2dpr下），解決問題。

可以通過css來縮小，其他通過設定viewport的scale屬性為0.5也可以。這裡對scale的理解，可以模擬為平時使用者用兩個手指來縮放頁面，縮放的時候元素所佔據的物理畫素點也會同時減少或增加。修改viewport的scale屬性，會作用到頁面的所有元素上。

首先測試如下**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
meta 
name
="viewport"
content
="width=device-width"
/>
<
style
>
#main
style
>
head
>
<
body
>
<
div 
id="main"
>
div>
body
>
html
>

明顯比 1px 要粗。解決辦法使用**查詢，修改後的**如下：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
meta 
name
="viewport"
content
="width=device-width"
/>
<
style
>
#main
.border-1px:after
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
} @media (-webkit-min-device-pixel-ratio: 2.0),(min-device-pixel-ratio: 2.0)
} @media (-webkit-min-device-pixel-ratio: 3.0),(min-device-pixel-ratio: 3.0)
} 
style
>
head
>
<
body
>
<
div 
id="main"
class
="border-1px"
>
div>
body
>
html
>

關於螢幕適配

目前主流裝置的長寬比為16比9，該比例的占有率還在持續上公升中。且在等寬情況下，該比例下的長為最大，因此在設計時以16比9為基礎，螢幕適配時只要對更矮的比例進行適配就可以了。2014.3.29日 主流android裝置解析度演示文稿 考慮如下情況，螢幕四角採用相對布局停靠有四個ui物件，有個跟當前螢...

關於 android螢幕適配

一 關於布局適配 1 不要使用絕對布局 2 盡量使用match parent 而不是fill parent 3 能夠使用權重的地方盡量使用權重 android layout weight 4 如果是純色背景，盡量使用 android 的shape 自定義。5 如果需要在特定解析度下適配，可以在 re...

關於安卓螢幕適配

一.非drawable 適配 對於非drawable 例如 textview,button等控制項 的適配，建議使用相對布局，按比例適配。在相對布局中，首先獲取手機的寬度和高度，然後指定每個控制項在手機中所佔的比例，再設定margin值，從而保證在不同解析度和dpi的手機上控制項顯示的效果是相同的。...