很久沒有更新博客了，由於自己的水平一般，能力有限，這種情況下的知識點可能過於薄弱，所以不好分享給大家，注意是怕誤導大家了，最近學習移動端的東西，有點心得，分享給大家，希望對大家有所幫助，如果有什么地方說的不對的地方，萬望不吝賜教，批評指正，謝謝了！
好了，開場白就不多說了，下面我們進入正題吧（有點猴急）：
iPhone設備的實際顯示尺寸：
今天要講的主題是關於iPhone的尺寸問題和在微信上iPhone的尺寸表現，能力有限，就講這一個知識點（這里說的iPhone指的是iPhone手機，不用我多強調吧），我們接觸到的iPhone手機主要有iPhone4，iPhone4s，iPhone5，iPhone5c，iPhone5s，iPhone6，iPhone6plus（近期要出的iPhone6s,iphon6s plus暫且不論，沒出不知道），通過官方網站可以查到對於的屏幕尺寸，這里就要引入一個概念了，就是設備像素比（devicePixelRatio），其實指的是window.devicePixelRatio, 被所有WebKit瀏覽器以及Opera所支持，那就要問了，何為設備像素比啊，下面給大家詳細介紹一下：
先給大家看一下iPhone尺寸上的比較詳細的參數說明，如果你記不住，可以把這圖保存起來，以作備忘。
window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式是：window.devicePixelRatio = 物理像素 / dips
（我自己測試的應該是設備的渲染像素和設備獨立像素的比例，即 window.devicePixelRatio = 渲染像素 / dips ，這里的渲染像素指的是上圖的Rendered Pixels）
大家都知道，ISO用的都是視網膜屏幕，而Android卻並不全是，這個以后再說，就像大多數瀏覽器一樣，大部分運行時的devicePixelRatio 的值是1，即屏幕是多少像素就顯示多少像素，
而視網膜屏幕就不同，它會將多個像素當一個像素使用，舉個例子，如果設備像素比（dips）為2，就是說用2*2個像素顯示一個像素的東西，如果大家不好理解，可以腦補一下，應該大家都有這樣的體會，比如一個100*100的圖片，不過這張圖的像素不是很高，就會感覺很模糊，如果是同一張圖，但是它的實際大小是200*200，但是圖片顯示的大小是100*100，這樣就會覺得這張圖會比原來的圖顯示的更清晰，就是這個道理，也就是說，設備像素比越高，顯示的越清晰，這就是為什么視網膜屏幕看起來這么清晰的原因，
當然這也需要更高像素的圖片
那總結一下：手機實際顯示的尺寸並不是手機實際的物理尺寸，也就是說一般手機參數里面的分辨率並不是手機真正顯示的尺寸，而是跟設備像素比有關系的，如果手機的設備像素比是1，即devicePixelRatio =1，則手機的顯示尺寸就是手機的物理像素（如iPhone 3GS，設備像素比為1，物理像素320*480，實際顯示的尺寸就是320*480），如果設備像素比是2，即devicePixelRatio =2，則手機的顯示尺寸就是手機物理像素/2（如iPhone6的物理尺寸為750*1136，設備像素比為2，則實際顯示尺寸為375*667），
這里要注意的是，設備像素比並不一定是整數，也可以是小數，比如Nexus One，分辨率為480*800，實際顯示尺寸為320*533，則其的設備像素比為1.5
（我對設備像素比是物理像素與設備獨立尺寸的比例還是渲染像素與設備獨立尺寸的比例的疑惑是在測iPhone6 plus的尺寸，上圖可以看到，iPhone6 plus的設備像素比是3，物理像素是1080*1920，如果是物理尺寸與設備像素比的話，那實際顯示尺寸應該是360*640，但是顯然這尺寸是不對的，但是渲染像素1242*2208的尺寸/3 =414*736 正好，所以我認為 設備像素比 是 渲染像素與設備獨立尺寸的比例，只是一般的屏幕物理像素就等於渲染像素，如果有哪個大牛有更好的論點，歡迎批評指正！）
iPhone在微信上的設備尺寸兼容：
那現在就很清楚了，iPhone4/iPhone4s 的屏幕顯示尺寸為320*480，iPhone5/iPhone5c/iPhone5s的屏幕顯示尺寸為320*568，iPhone6的屏幕尺寸為375*667，iPhone6 plus的屏幕顯示尺寸為414*736，用css做iPhone的尺寸兼容就好做了，但是，你以為這樣就完了嗎？發個圖片解釋一下
圖有點大，沒做壓縮，看的清楚，不知道大家注意到沒有，如果在做微信web頁面開發的時候，如果用上述我們說的設備高度來做的話，實際顯示的高度總是不對，貌似也沒有這么高，例如上圖為iPhone6的截圖，屏幕高度document.body.clientHeight ==603 或者
$(window).height==603，但是用谷歌模擬器的寬高顯示是真真的，看下圖：
那少的64px去哪里了，哈哈，揭曉答案！
大家看微信上面的狀態欄和標題欄，往上看大圖（運營商，電池，時間那一欄和下面的騰訊新聞欄），這個高度剛好64px，所以，現在知道那64px去哪里了吧，所以在做微信端全屏顯示的圖的時候，一點要把這個高度考慮進去，在谷歌的模擬器上特別要注意，不然實際顯示效果和你在模擬器上面的效果就不一定一樣了。
下面是我用css做的兼容性的寫法，僅供參考：
/*ip 4s*/
@media all and (min-width:320px) and (max-height:416px){
}
/*ip 5s*/
@media all and (min-width:320px) and (max-height:504px){
}
/*andriod*/
@media all and (min-width:360px){
}
/*ip 6*/
@media all and (min-width:375px){
}
/*ip 6+*/
@media all and (min-width:414px){
}
如需特別強調iPhone6和iPhone6 plus，也可把高度也加進去，依情況而定。
同理，安卓也是一樣，雖然安卓的設備像素比各不一樣，設備的寬度，高度都不一樣，但是iPhone的尺寸是可以把握的，將安卓的尺寸設為全局尺寸，iPhone尺寸單獨開小灶，基本上就可以滿足絕大部分的移動端設備了。
如果你看了這篇文章，覺得還是有點沒弄懂，可以單獨私信我或者發我郵箱，如果有什么地方說的不對的，請多多指點，資歷尚淺，能力一般，難免會有說錯或者理解錯的地方，請多包涵！