常见的手机设计尺寸

对于程序猿来说，做前端经常会遇到关于适配的问题，这边总结一些平时需要注意的地方。个人理解，可能有误区。

pt和px的区分

px就是表示pixel，像素，是屏幕上显示数据的最基本的点。pixel是相对大小大小。

pt全称为point，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。point是绝对大小。

iPhone尺寸对照图

导航栏和状态栏

iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为750x1334px。

☆ 状态栏(status bar)：就是电量条，其高度为：40px；

☆ 导航栏(navigation)：就是顶部条，其高度为：88px；

☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；

☆ iPhone6有tabbar内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

☆ iPhone6无tabbar内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px=1206px

☆ iPhoneX有tabbar内容区域(content)：就是屏幕中间的区域，其高度为：1624px-40px-88px-98px=1398px

☆ iPhoneX无tabbar内容区域(content)：就是屏幕中间的区域，其高度为：1624px-40px-88px=1496px

示例图

通常我们的设计稿一般都是按照iPhone6的尺寸来进行设计。也就是常见的750*1334。一般我们在做适配兼容方面，放弃iPhone4以及以下的用户。从iPhone6到iPhoneX进行适配。也就是范围在750*1334和750*1624。1624的换算就是从上面图的iPhoneX尺寸换算成750得来。

计算出的安全区域大概为
1334px-40px-88px=1206px。也就是一屏的内容区域如果在1206px范围内，算是安全区域。

图片示范 真实项目中尺寸