Web可以通過設置viewport
的width
來指定視口邏輯像素數量,我們通常設置爲device-width
來達到最佳的顯示效果。
但這個device-width
在不同色設備上數值不同,差異可能很大,我們需要了解一些常用機型的數值來做適配。同時,根據不同設備的不同寬度,可以用媒體查詢來粗略的判斷設備型號。
不一定準確,邏輯像素和物理像素的關係大致爲:
邏輯像素 = 物理像素 / 像素比
以下是部分從前端日誌提取、部分從資料中收集的常見機型邏輯像素數量。注意:未經驗證,僅供參考。因爲誰有這麼多手機啊,除非你送我(狗頭)。
機型 | 邏輯像素(寬 * 高) | 像素比 |
---|---|---|
iPhone 12 Pro Max | 428 * 926 | 3 |
iPhone 12 Pro | 390 * 844 | 3 |
iPhone 12 | 428 * 926 | 3 |
iPhone 12 Mini | 360 * 780 | 3 |
iPhone 11 Pro Max | 414 * 896 | 3 |
iPhone 11 Pro | 375 * 812 | 3 |
iPhone 11 | 414 * 896 | 2 |
iPhone SE | 375 * 667 | 2 |
iPhone XS Max | 414 * 896 | 3 |
iPhone XR | 414 * 896 | 2 |
iPhone XS | 375 * 812 | 3 |
iPhone X | 375 * 812 | 3 |
iPhone 8 Plus | 414 * 736 | 3 |
iPhone 8 | 375 * 667 | 2 |
iPhone 7 Plus | 414 * 736 | 3 |
iPhone 7 | 375 * 667 | 2 |
iPhone 6S Plus | 414 * 736 | 3 |
iPhone 6S | 375 * 667 | 2 |
iPhone 6 Plus | 414 * 736 | 3 |
iPhone 6 | 375 * 667 | 2 |
iPhone 5S | 320 * 568 | 2 |
iPhone 5C | 320 * 568 | 2 |
iPhone 5 | 320 * 568 | 2 |
iPhone 4S | 320 * 480 | 2 |
iPhone 4 | 320 * 480 | 2 |
iPhone 3GS | 320 * 480 | 1 |
iPhone 3 | 320 * 480 | 1 |
iPhone 2G | 320 * 480 | 1 |
華爲 P40 Pro | 363 * 797 | 3.3125 |
華爲 P40 | 360 * 780 | 3 |
華爲 P30 Pro | 360 * 780 | 3 |
華爲 P30 | 360 * 780 | 3 |
華爲 P20 Pro | 360 * 747 | 3 |
華爲 P20 | 360 * 748 | 3 |
華爲 P10 Plus | 412 * 732 | 2.625 |
華爲 P9 Plus | 360 * 640 | 2.625 |
華爲 Mate40 Pro | 335 * 720 | 3.3 |
華爲 Mate40 RS | 384 * 792 | 3 |
華爲 Mate40 E | 384 * 792 | 3 |
華爲 Mate30 Pro | 392 * 800 | 3 |
華爲 Mate30 | 360 * 780 | 3 |
華爲 Mate20 Pro | 360 * 780 | 3 |
華爲 Mate20 X | 360 * 748 | 3 |
華爲 Mate20 | 360 * 748 | 3 |
華爲 Mate10 Pro | 360 * 720 | 3 |
華爲 Mate10 | 360 * 640 | 3 |
華爲 Mate RS | 360 * 720 | 3 |
華爲 Mate X2 | 357 * 831 | 3.25 |
華爲 Nova8 Pro | 381 * 823 | 2.981 |
華爲 Nova8 | 360 * 780 | 3 |
華爲 Nova7 Pro | 360 * 780 | 3 |
華爲 Nova7 SE | 360 * 800 | 3 |
華爲 Nova7 | 360 * 800 | 3 |
華爲 Nova6 SE | 360 * 770 | 3 |
華爲 Nova6 | 360 * 800 | 3 |
華爲 Nova5 Pro | 360 * 780 | 3 |
華爲 Nova4 | 360 * 770 | 3 |
華爲 Nova3 | 360 * 780 | 3 |
華爲 暢想20 Pro | 360 * 800 | 3 |
華爲 暢想20 SE | 360 * 800 | 3 |
華爲 暢想10 S | 360 * 800 | 3 |
華爲 暢想10 Plus | 360 * 780 | 3 |
華爲 暢想9 Plus | 360 * 780 | 3 |
華爲 暢想9 E | 360 * 780 | 2 |
華爲 暢想9 | 360 * 760 | 2 |
華爲 麥芒9 | 360 * 800 | 3 |
榮耀 50 SE | 360 * 796 | 3 |
榮耀 50 | 360 * 780 | 3 |
榮耀 30 Pro | 360 * 780 | 3 |
榮耀 30 | 360 * 800 | 3 |
榮耀 20 Pro | 360 * 780 | 3 |
榮耀 20 | 360 * 780 | 3 |
榮耀 9X Pro | 360 * 780 | 3 |
榮耀 9X | 320 * 694 | 3.375 |
榮耀 8X Max | 360 * 748 | 3 |
榮耀 8X | 360 * 780 | 3 |
榮耀 8 | 360 * 640 | 3 |
榮耀 V40 | 381 * 824 | 3.25 |
榮耀 V30 Pro | 360 * 800 | 3 |
榮耀 V30 | 360 * 800 | 3 |
榮耀 V20 | 360 * 770 | 3 |
榮耀 X10 | 360 * 800 | 3 |
榮耀 Note10 | 412 * 846 | 2.625 |
榮耀 Play 4T Pro | 360 * 800 | 3 |
榮耀 Play 4T | 360 * 780 | 3 |
榮耀 Play | 360 * 800 | 3 |
小米 11 Ultra | 412 * 915 | 3.5 |
小米 11 | 412 * 915 | 3.5 |
小米 10 Pro | 393 * 851 | 2.75 |
小米 10 | 393 * 851 | 2.75 |
小米 9 Pro | 393 * 873 | 2.75 |
小米 9 SE | 360 * 780 | 3 |
小米 9 A | 360 * 800 | 3 |
小米 8 UD | 393 * 818 | 2.75 |
小米 8 Lite | 393 * 830 | 2.75 |
小米 8 | 393 * 818 | 2.75 |
小米 MIX 2S | 393 * 851 | 2.75 |
小米 MIX 2 | 393 * 786 | 2.75 |
小米 MIX | 393 * 851 | 2.75 |
紅米 9A | 360 * 800 | 2 |
紅米 8A | 360 * 760 | 2 |
紅米 7A | 360 * 720 | 2 |
紅米 K40 | 393 * 873 | 2.75 |
紅米 K30 Ultra | 393 * 873 | 2.75 |
紅米 K30 I | 393 * 873 | 2.75 |
紅米 K30 | 393 * 873 | 2.75 |
紅米 K20 Pro | 393 * 851 | 2.75 |
紅米 Note10 Pro | 393 * 873 | 2.75 |
紅米 Note9 Pro | 393 * 873 | 2.75 |
紅米 Note9 | 393 * 851 | 2.75 |
紅米 Note8 Pro | 393 * 851 | 2.75 |
紅米 Note8 | 393 * 851 | 2.75 |
紅米 Note7 Pro | 393 * 851 | 2.75 |
紅米 Note4 X | 360 * 640 | 3 |
OPPO Reno6 | 360 * 800 | 3 |
OPPO Reno5 Pro | 360 * 800 | 3 |
OPPO Reno5 K | 360 * 800 | 3 |
OPPO Reno5 | 360 * 800 | 3 |
OPPO Reno4 Pro | 360 * 800 | 3 |
OPPO Reno4 SE | 360 * 800 | 3 |
OPPO Reno3 | 360 * 800 | 3 |
OPPO Reno A79 | 360 * 720 | 3 |
OPPO Reno A55 | 360 * 800 | 2 |
OPPO Reno Ace | 360 * 800 | 3 |
OPPO Reno Z | 360 * 780 | 2 |
OPPO A93 | 360 * 800 | 3 |
OPPO A92 S | 360 * 800 | 3 |
OPPO A91 | 360 * 800 | 3 |
OPPO A83 | 360 * 720 | 2 |
OPPO A73 | 360 * 720 | 2 |
OPPO A59 M | 360 * 640 | 2 |
OPPO A55 | 360 * 800 | 2 |
OPPO A52 | 360 * 800 | 3 |
OPPO A11 X | 360 * 800 | 2 |
OPPO A11 | 360 * 800 | 2 |
OPPO A9 X | 360 * 780 | 3 |
OPPO A9 | 360 * 780 | 3 |
OPPO A8 | 360 * 800 | 3 |
OPPO A7 | 360 * 760 | 2 |
OPPO A5 | 360 * 760 | 2 |
OPPO R17 | 360 * 780 | 3 |
OPPO R15 X | 360 * 780 | 3 |
OPPO R15 | 360 * 760 | 3 |
OPPO R11 ST | 360 * 720 | 3 |
OPPO R11 S | 360 * 720 | 3 |
OPPO R9 ST | 360 * 640 | 3 |
VIVO NEX 3S | 393 * 821 | 2.75 |
VIVO NEX | 360 * 772 | 3 |
VIVO S10 | 360 * 800 | 3 |
VIVO S9 | 360 * 800 | 3 |
VIVO S7 E | 360 * 800 | 3 |
VIVO S6 | 360 * 800 | 3 |
VIVO U3 | 360 * 780 | 3 |
VIVO X70 Pro | 360 * 800 | 3 |
VIVO X60 Pro | 360 * 792 | 3 |
VIVO X60 | 360 * 792 | 3 |
VIVO X50 Pro | 360 * 792 | 3 |
VIVO X50 | 360 * 792 | 3 |
VIVO X30 Pro | 360 * 800 | 3 |
VIVO X27 Pro | 360 * 820 | 3 |
VIVO X27 | 360 * 780 | 3 |
VIVO X21 A | 360 * 760 | 3 |
VIVO X21 | 360 * 760 | 3 |
VIVO X20 A | 360 * 720 | 3 |
VIVO X9 Plus | 360 * 640 | 3 |
VIVO X7 | 360 * 640 | 3 |
VIVO Y97 | 360 * 760 | 3 |
VIVO Y73 S | 360 * 800 | 3 |
VIVO Y67 A | 360 * 640 | 2 |
VIVO Y31 S | 360 * 803 | 2 |
VIVO Y3 | 360 * 772 | 2 |
VIVO Z1 I | 360 * 760 | 3 |
VIVO iQOO Neo5 | 360 * 803 | 3 |
VIVO iQOO Neo3 | 360 * 803 | 3 |
VIVO iQOO Neo-855 | 360 * 780 | 3 |
VIVO iQOO Z3 | 360 * 803 | 3 |
VIVO iQOO Z1 X | 360 * 803 | 3 |
一加 9 Pro | 360 * 804 | 4 |
一加 7T | 412 * 915 | 2.625 |
三星 Galaxy F52 | 384 * 857 | 2.8125 |
三星 Galaxy S20 | 360 * 800 | 3 |
三星 Galaxy S9 | 360 * 740 | 3 |
三星 Galaxy Z Fold3 | 320 * 872 | 2.625 |
三星 Galaxy Note 20 | 360 * 800 | 3 |
三星 Galaxy Note 10 | 412 * 869 | 2.625 |