iPhone 13（Pro、Max、Mini）和舊款 iPhone 的所有媒體查詢

Question

針對 Apple 最新設備的 CSS 媒體查詢是什么？

2019 年的設備：iPhone 11、iPhone 11 Pro 和 iPhone 11 Pro Max。

2020 年設備：iPhone 12 mini、iPhone 12、iPhone 12 Pro 和 iPhone 12 Pro Max。

2021 年的設備：iPhone 13 mini、iPhone 13、iPhone 13 Pro 和 iPhone 13 Pro Max。

Answer 1

iPhone 12 迷你

/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

此媒體查詢適用於：iPhone 12 Mini、iPhone 11 Pro、iPhone Xs 和 iPhone X

---

iPhone 12 和 iPhone 12 專業版

/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }

此媒體查詢適用於：iPhone 12 和 iPhone 12 Pro

---

iPhone 12 專業版

/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }

---

iPhone 11

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

此媒體查詢適用於：iPhone 11 和 iPhone XR

---

iPhone 11 專業版

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

此媒體查詢適用於：iPhone 12 Mini、iPhone 11 Pro、iPhone Xs 和 iPhone X

---

iPhone 11 專業版

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }

此媒體查詢適用於：iPhone 11 Pro Max 和 iPhone Xs Max

---

設備方向

要添加橫向或縱向，請使用以下代碼：

對於肖像：

and (orientation : portrait) 

對於風景：

and (orientation : landscape) 

Answer 2

對於那些正在尋找 2023 年 iPhone 14 更新版本的用戶：

/*iPhone 14*/
@media only screen
and (width: 390px) 
and (device-height: 844px)
and (-webkit-device-pixel-ratio: 3) { }

/*iPhone 14 Pro*/
@media only screen
    and (width: 393px) 
    and (device-height: 852px)
    and (-webkit-device-pixel-ratio: 3) { }

/*iPhone 14 Pro Max*/
@media only screen
    and (device-width: 430px) 
    and (device-height: 932px) 
    and (-webkit-device-pixel-ratio: 3) { }