[RWD]iPhone X 以及 8, 8+ 等各代機種的螢幕尺寸解析度與CSS語法對照表

iMessage 裡面，這兩個月來已經累積了有好幾則朋友們傳來的訊息，主題都是關於 iPhone 的螢幕尺寸解析度是多少之類的問題。
有些是問 iPhone X，還有的是問很古早的 iPhone 4/4s(還不放棄這一款嗎？)。

當然問這些問題不是為了比較哪支手機螢幕比較大，而是為了替客戶或是自己的網站設計一個RWD的行動版樣式，感覺有了每一款機種的尺寸，就好像在設計上就完成了一半那樣(其實還差的遠了喔)！

所以乾脆就直接整理了最近的這幾代 iPhone 每一款的螢幕尺寸解析對照表，讓有需要的朋友們參考。
畢竟在執行 RWD 的行動版設計或是打造一個 iPhone 上的 App，有了尺寸對照表示挺方便的，不是嗎 ^^
我們一起來看看吧！

iPhone X, 8/8+,7/7+,6/6+,5 的螢幕尺寸解析度一覽

下面的對照表，會依據尺寸大小來歸類，因為畢竟不是每款手機的尺寸都不同(感謝上帝)。

依螢幕解析度來區分的話，總共計有 5 種不同的尺寸(iPhone 2, 3G 就不再計算了)：

最大的目前是 iPhone X(5.8吋)。
接著是 iPhone 6+,6s+,7+和 8+(5.5吋)。
然後是 iPhone 6/6s,7 和 8(4.7吋)。
再來是 iPhone 5, 5s, 5c, 5SE(4吋)。
最後則是 iPhone 4/4s(3.5吋)。

接下來我們就來逐一將這五種不同尺寸的 iPhone 螢幕顯示尺寸，以及解析度分別整理給大家參考喔。

iPhone X 尺寸、顯示像素與解析度

iPhone X 實際的畫面尺寸為 375 X 812 pt(Point)。
轉換為三倍視網膜營幕後，顯示像素為 1125 X 2436 px。
螢幕對角線為 5.8吋，458 PPI 的解析度。

iPhone X 的 CSS Media Queries 的語法

下面是不分垂直或是橫向螢幕，通用版的語法：

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 812px)

and (-webkit-device-pixel-ratio : 3) { /* 這裡寫入指定的 CSS 語法 */}

下面是垂直螢幕的語法：

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 812px) 

and (-webkit-device-pixel-ratio : 3)

and (orientation : portrait) { /* 這裡寫入指定的 CSS 語法 */}

下面是橫向螢幕的語法：

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 812px) 

and (-webkit-device-pixel-ratio : 3)

and (orientation : landscape) { /* 這裡寫入指定的 CSS 語法 */}

iPhone 6+,6s+,7+和 8+ 的尺寸、顯示像素與解析度

iPhone 6+一直到 8+的實際畫面尺寸為 414 X 736 pt(Point)。
轉換為三倍視網膜營幕後，顯示像素為 1080 X 1920 px。
這個系列的視網膜計算跟iPhone X不同，雖然規格上都是3倍的轉換率，可是實際顯示時，會下降到1.15倍。
螢幕對角線為 5.5吋，401 PPI 的解析度。

iPhone 6,6s,7,8 Plus 的 CSS Media Queries 的語法

不分垂直或是橫向螢幕，通用版的語法：

@media only screen 

and (min-device-width : 414px) 

and (max-device-width : 736px) { /* 這裡寫入指定的 CSS 語法 */}

下面是垂直螢幕的語法：

@media only screen 

and (min-device-width : 414px) 

and (max-device-width : 736px) 

and (orientation : portrait) { /* 這裡寫入指定的 CSS 語法 */}

下面是橫向螢幕的語法：

@media only screen 

and (min-device-width : 414px) 

and (max-device-width : 736px) 

and (orientation : landscape) { /* 這裡寫入指定的 CSS 語法 */}

iPhone 6/6s,7 和 8 的尺寸、顯示像素與解析度

iPhone X 實際的畫面尺寸為 375 X 667 pt(Point)。
轉換為兩倍視網膜營幕後，顯示像素為 750 X 1334 px。
螢幕對角線為 4.7吋，326 PPI 的解析度。

iPhone 6,6s,7,8 的 CSS Media Queries 的語法

不分垂直或是橫向螢幕，通用版的語法：

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) { /* 這裡寫入指定的 CSS 語法 */}

下面是垂直螢幕的語法：

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) 

and (orientation : portrait) { /* 這裡寫入指定的 CSS 語法 */}

下面是橫向螢幕的語法：

@media only screen 

and (min-device-width : 375px) 

and (max-device-width : 667px) 

and (orientation : landscape) { /* 這裡寫入指定的 CSS 語法 */}

iPhone 5, 5s, 5c, 5SE 的尺寸、顯示像素與解析度

iPhone X 實際的畫面尺寸為 320 X 568 pt(Point)。
轉換為兩倍視網膜營幕後，顯示像素為 640 X 1136 px。
螢幕對角線為 4 吋，326 PPI 的解析度。

iPhone 5, 5s, 5c, 5SE 的 CSS Media Queries 的語法

不分垂直或是橫向螢幕，通用版的語法：

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 568px) { /* 這裡寫入指定的 CSS 語法 */}

下面是垂直螢幕的語法：

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 568px) 

and (orientation : portrait) { /* 這裡寫入指定的 CSS 語法 */}

下面是橫向螢幕的語法：

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 568px) 

and (orientation : landscape) { /* 這裡寫入指定的 CSS 語法 */}

iPhone 4/4s 的尺寸、顯示像素與解析度

iPhone X 實際的畫面尺寸為 320 X 480 pt(Point)。
轉換為兩倍視網膜營幕後，顯示像素為 640 X 960 px。
螢幕對角線為 3.5 吋，326 PPI 的解析度。

iPhone 4/4s 的 CSS Media Queries 的語法

不分垂直或是橫向螢幕，通用版的語法：

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) { /* 這裡寫入指定的 CSS 語法 */}

下面是垂直螢幕的語法：

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) 

and (orientation : portrait) { /* 這裡寫入指定的 CSS 語法 */}

下面是橫向螢幕的語法：

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) 

and (orientation : landscape) { /* 這裡寫入指定的 CSS 語法 */}

我們也有臉書專頁了，歡迎大家按讚加入喔： @5min.reading