[iOS开发]iPhoneX系列顶部和底部尺寸图解

逃离我推掉我的手 2022-01-23 07:49 352阅读 0赞

![Image 1][]

iPhoneX屏幕大小.png

*  竖屏尺寸：1125px × 2436px(375pt × 812pt @3x)
 *  横屏尺寸：2436px × 1125px(812pt × 375pt @3x)

### 与其它iOS设备的差异 ###

以下是与iPhone 6、7、8 (375×667pt) 相比。  
Status Bar 高度由 20pt 增长为44pt。

![Image 1][]

status bar.png

底部需要预留 34pt 给 Home Indicator区域(下面有详细说明)

![Image 1][]

Home Indicator.png

宽度不变，高度多出 145pt，但由于 Status Bar 以及 Home Indicator，实际上可有效利用的高度为  
145 – 24 (Status Bar) – 34 (Home Indicator) = 87pt

![Image 1][]

差异对比.png

### 键盘高度 ###

键盘高度由 216pt 增长为 291pt，设计文字区域时要小心

![Image 1][]

键盘高度变化.png

包含 Home Indicator，Tab Bar 高度由 49pt 增长为 83pt。(下面有详细说明)

![Image 1][]

Home Indicator区域.png

注意横屏时Home Indicator的高度为21pt，需要格外注意

![Image 1][]

横屏时.png

### 总结 ###

<table> 
 <thead> 
  <tr> 
   <th>高度变化</th> 
   <th>Normal Height</th> 
   <th>iPhoneX Height</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>UINavigationBar</td> 
   <td>64</td> 
   <td>88</td> 
  </tr> 
  <tr> 
   <td>UIStatusBar</td> 
   <td>20</td> 
   <td>44</td> 
  </tr> 
  <tr> 
   <td>UITabbar</td> 
   <td>49</td> 
   <td>83</td> 
  </tr> 
 </tbody> 
</table>

### 启动图适配 ###

![Image 1][]

启动图适配.png

### app图标适配 ###

![Image 1][]

app图片适配.png

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，352人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS 2020iPhoneX、iPhone12刘海适配，底部安全区域高度

废话不多说直接上代码：方法一： //判断是否为iPhone X define IPHONE_X \ ({BOOL isPhoneX = NO;\

女爷i/ 2022年12月23日 12:26/ 0 赞/ 239 阅读

相关 bootstrap贴在顶部、底部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

迈不过友情╰/ 2022年10月02日 07:53/ 0 赞/ 100 阅读

相关 bootstrap悬浮顶部或者底部

这是bootstrap提供的样式,只需要引入bootstrap.css即可. 需要使用的class样式: navbar navbar-inverse navbar

小咪咪/ 2022年08月23日 14:43/ 0 赞/ 121 阅读

相关 iOS开发系列--IOS程序开发概览ios基础

[iOS开发系列--IOS程序开发概览][iOS_--IOS] 概览终于到了真正接触IOS应用程序的时刻了，之前我们花了很多时间去讨论C语言、ObjC等

约定不等于承诺〃/ 2022年08月21日 08:59/ 0 赞/ 52 阅读

相关 IO流_IO流小结图解

![Center][] [Center]: /images/20220711/8b09562b059b4b178174ba9eea22ad72.png

偏执的太偏执、/ 2022年07月12日 05:02/ 0 赞/ 171 阅读

相关 iOS 各设备启动图尺寸(含iPhone X)

iPhone X 5.8 英寸、2436 x 1125 像素分辨率，这些意味着iPhone X 需要适配自己尺寸的启动图片。博主在开发者网站找到了各个设备较详细的启动图尺寸：

本是古典何须时尚/ 2022年05月16日 13:07/ 0 赞/ 439 阅读

相关 js scroll底部悬浮和顶部悬浮（未封装）

function scrollCon(){ window.addEventListener("scroll",function(e){ $('.o

迷南。/ 2022年05月10日 20:54/ 0 赞/ 191 阅读

相关 iphonex系列机型判断

iphonex xs xr xsmax 判断 export function isIphone() { return /iphone/gi.tes

￡神魔★判官ぃ/ 2022年01月29日 07:19/ 0 赞/ 211 阅读

相关 [iOS开发]iPhoneX系列顶部和底部尺寸图解

![Image 1][] iPhoneX屏幕大小.png 竖屏尺寸：1125px × 2436px(375pt × 812pt @3x) 横屏尺寸：2436px

逃离我推掉我的手/ 2022年01月23日 07:49/ 0 赞/ 353 阅读

相关如何制作网页的顶部和底部？

本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_

喜欢ヅ旅行/ 2021年12月16日 08:17/ 0 赞/ 301 阅读