以往web移動適配，常規寫法是：media only screen
@media only screen and (min-device-width: 320px)做移動端web相容測試時候，不能將chrome模擬效果同iphone6/plus真機完全劃等號。一定要在確認了iphone裝置所處顯示模式和真實屏寬後再針對性的進行除錯。@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2)
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2)
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3)
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3)
退一步說，姑且認為標準模式和放大模式下裝置寬度都是320px的情況屬於個例。不過在沒有確認iphone6/iphone 6 plus是處於標準模式還是放大模式的前提下，來測試css**查詢**，來檢視真機預覽效果，都是不靠譜的做法。因此，在未確認裝置顯示模式的情況下，這個結論是完全成立的：iphone6屏寬不一定是375px，iphone6 plus屏寬不一定是414px。
------------------------------------ web移動適配新辦法實現全適配 ------------------------------------
rem是什麼？
1.亞馬遜：
2.攜程：
3.蘭亭
上面的**都是採用的流式布局的技術實現的，他們在頁面布局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式布局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大螢幕手機下看到的效果相當於是被橫向拉長來一樣。
流式布局並不是最理想的實現方式，通過大量的百分比布局，會經常出現許多相容性的問題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式布局對元素造成的影響，只能設計橫向拉伸的元素布局，設計的時候存在很多侷限性。
2.固定寬度做法
還有一種是固定頁面寬度的做法，早期有些**把頁面設定成320的寬度，超出部分留白，這樣做視覺，前端都挺開心，視覺在也不用被流式布局限制自己的設計靈感了，前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問題，例如在大螢幕手機下兩邊是留白的，還有乙個就是大螢幕手機下看起來頁面會特別小，操作的按鈕也很小，手機**首頁起初是這麼做的，但近期改版了，採用了rem。
3.響應式做法
rem能等比例適配所有螢幕
上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。舉個例子：
html
.btn
demo 上面**結果按鈕大小如下圖：
我把html設定成10px是為了方便我們計算，為什麼6rem等於60px。如果這個時候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發生上面變化:
html
demo
按鈕大小結果如下：
上面的width，height變成了上面結果的兩倍，我們只改變了html的font-size，但.btn樣式的width,height的rem設定的屬性不變的情況下就改變了按鈕在web中的大小。
其實從上面兩個案例中我們就可以計算出1px多少rem:
第乙個例子：
120px = 6rem * 20px(根元素設定大值)
第二個例子：
240px = 6rem * 40px(根元素設定大值)
推算出：
10px = 1rem 在根元素（font-size = 10px的時候）；
20px = 1rem 在根元素（font-size = 20px的時候）；
40px = 1rem 在根元素（font-size = 40px的時候）；
在上面兩個例子中我們發現第乙個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會導致按鈕的大小發生改變，我們並不需要改變先前給按鈕設定的寬度和高度，其實這就是我們最想看到的，為什麼這麼說？接下來我們再來看乙個例子：
demo
由上面兩個的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以通過chrome瀏覽器的除錯工具去切換第三個的demo在不同裝置下的展示效果，或者通過縮放瀏覽器的寬度來檢視效果，我們可以看到不管在任何解析度下，頁面的排版都是按照等比例進行切換，並且布局沒有亂。我只是通過一段js根據瀏覽器當前的解析度改變font-size的值，就簡單的實現了上面的效果，頁面的所有元素都不需要進行任何改變。
到這裡肯定有很多人會問我是怎麼計算出不同解析度下font-size的值？
首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給我的前提下，（當然這個尺寸肯定不一定是640，可以是320，或者480，又或是375）來看一組**。
上面的**藍色一列是demo3中頁面的尺寸，頁面是以640的寬度去切的，怎麼計算不同寬度下font-site的值，大家看**上面的數值變化應該能明白。舉個例子：384/640 = 0.6，384是640的0.6倍，所以384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不同裝置的寬度計算方式以此類推。
html上面的做的設定當然是不能所有裝置全適配，但是用js是可以實現全適配。具體用哪個就要根據自己的實際工作場景去定了。@media only screen and (min-width: 401px)
}@media only screen and (min-width: 428px)
}@media only screen and (min-width: 481px)
}@media only screen and (min-width: 569px)
}@media only screen and (min-width: 641px)
}
**首頁：m.taobao.com
d x：m.dx.com
最後我們再來看一看他的相容性：
rem布局 手機webApp自適應
這是阿里團隊的高畫質方案布局 所謂高畫質方案就是根據裝置螢幕的dpr 裝置畫素比，又稱 x，比如dpr 2時，表示1個css畫素由4個物理畫素點組成 動態設定 html 的font size,同時根據裝置dpr調整頁面的縮放值，進而達到高畫質效果 高畫質方案原始碼 use strict param ...
iOS開發之應用內檢測手機鎖屏，解鎖狀態
1.程式在前台，這種比較簡單。直接使用darwin層的通知就可以了 import staticvoidscreenlockstatechanged cfnotificationcenterrefcenter,void observer,cfstringrefname,constvoid object...
了解開發手機的各項引數之顯示屏
所以,讓我們從程式設計師的角度來了解一下手機顯示屏的引數.public class mainactivity extends activity displaymetrics是乙個描述顯示屏一般資訊 大小,密度,字型縮放等 的結構體 displaymetrics dm new displaymetri...