iPhone 视口尺寸完整指南

这份综合指南提供了所有iPhone机型的详细视口尺寸和屏幕分辨率。对于开发响应式网站和应用程序的网页开发者和设计师来说是必不可少的信息。

视口尺寸表

机型 视口尺寸 屏幕分辨率 DPR 发布年份
iPhone 16 Pro Max 440 × 956 1320 × 2868 3.0 2024
iPhone 16 Pro 402 × 874 1206 × 2622 3.0 2024
iPhone 16 Plus 428 × 926 1284 × 2778 3.0 2024
iPhone 16 393 × 852 1179 × 2556 3.0 2024
iPhone 15 Pro Max 430 × 932 1290 × 2796 3.0 2023
iPhone 15 Pro 393 × 852 1179 × 2556 3.0 2023
iPhone 15 Plus 430 × 932 1290 × 2796 3.0 2023
iPhone 15 393 × 852 1179 × 2556 3.0 2023
iPhone 14 Pro Max 430 × 932 1290 × 2796 3.0 2022
iPhone 14 Pro 393 × 852 1179 × 2556 3.0 2022
iPhone 14 Plus 428 × 926 1284 × 2778 3.0 2022
iPhone 14 390 × 844 1170 × 2532 3.0 2022
iPhone 13 Pro Max 428 × 926 1284 × 2778 3.0 2021
iPhone 13 Pro 390 × 844 1170 × 2532 3.0 2021
iPhone 13 390 × 844 1170 × 2532 3.0 2021
iPhone 13 mini 375 × 812 1125 × 2436 3.0 2021
iPhone 12 Pro Max 428 × 926 1284 × 2778 3.0 2020
iPhone 12 Pro 390 × 844 1170 × 2532 3.0 2020
iPhone 12 390 × 844 1170 × 2532 3.0 2020
iPhone 12 mini 375 × 812 1125 × 2436 3.0 2020
iPhone SE (3rd gen) 375 × 667 750 × 1334 2.0 2022
iPhone 11 Pro Max 414 × 896 1242 × 2688 3.0 2019
iPhone 11 Pro 375 × 812 1125 × 2436 3.0 2019
iPhone 11 414 × 896 828 × 1792 2.0 2019
iPhone XS Max 414 × 896 1242 × 2688 3.0 2018
iPhone XS 375 × 812 1125 × 2436 3.0 2018
iPhone XR 414 × 896 828 × 1792 2.0 2018
iPhone X 375 × 812 1125 × 2436 3.0 2017
iPhone 8 Plus 414 × 736 1080 × 1920 2.6 2017
iPhone 8 375 × 667 750 × 1334 2.0 2017
iPhone 7 Plus 414 × 736 1080 × 1920 2.6 2016
iPhone 7 375 × 667 750 × 1334 2.0 2016
iPhone SE (1st gen) 320 × 568 640 × 1136 2.0 2016
iPhone 6s Plus 414 × 736 1080 × 1920 2.6 2015
iPhone 6s 375 × 667 750 × 1334 2.0 2015

理解视口尺寸

视口基础知识

  • 视口尺寸: 您的网站可以使用的CSS像素可见区域
  • 屏幕分辨率: 设备上实际的物理像素数量
  • 设备像素比 (DPR): 物理像素与CSS像素之间的比率

设计考虑

  • 考虑不同的屏幕尺寸和密度
  • 考虑各种宽高比
  • 针对不同方向进行优化
  • 在多个设备上测试
  • 考虑折叠屏和双屏设备