iPhone屏幕尺寸說明及iPhone在微信上的一些表現

好久沒有更新博客了，因爲本身的水平通常，能力有限，這種狀況下的知識點可能過於薄弱，因此很差分享給你們，注意是怕誤導你們了，最近學習移動端的東西，有點心得，分享給你們，但願對你們有所幫助，若是有什麼地方說的不對的地方，萬望不吝賜教，批評指正，謝謝了！

好了，開場白就很少說了，下面咱們進入正題吧（有點猴急）：

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尺寸單獨開小竈，基本上就能夠知足絕大部分的移動端設備了。

若是你看了這篇文章，以爲仍是有點沒弄懂，能夠單獨私信我或者發我郵箱，若是有什麼地方說的不對的，請多多指點，資歷尚淺，能力通常，不免會有說錯或者理解錯的地方，請多包涵！