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 |