移动端CSS逻辑像素表

原创
09/24 11:46
阅读数 47

Web可以通过设置viewportwidth来指定视口逻辑像素数量,我们通常设置为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
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部