被iPhone X刷了一天屏，到下午实在受不了各种假帖。标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子，与设计图无关的内容通通不提
昨夜发布的iPhone 8属于常规升级，屏幕与以往的iPhone6、6S、7系列相同。在昨天发布的新机中，只有iPhone X的分辨率发生了变化，但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去我们熟知的iPhone 4.7''、iPhone 5.5'' 放大模式宽度相同。通俗的说，iPhone X可看做是iPhone 4.7'' 的加长版
然而，事情并不是设计图加长这么简单。
过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域Safe Area，而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计，需要设计师对绘图区域做出调整。苹果给出的安全区域如下
页面内容不能超出安全区域（Safe Area）
避免将触发交互行为的按钮放在屏幕的底部，人们会在屏幕底端使用手势进入主屏或切换应用。（底部横条是Home键）
 
值得注意的是，iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外，Safari底部操作栏也有放大
讲完竖屏，再说横屏。
和竖屏一样，横屏的内容也要放置在Safe Area中
避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局操作优先于App的操作。如果把功能放在角落里，用户操作起来也很费劲，尽量在用户手指可及区域内设计功能
 
最后说下最核心的问题，Safe Area 范围有多大？
下午我比对了官网上所有与iPhone X相关的界面，可以确定，Safe Area区间如下：
对于习惯用750x1334作图的设计师而言，iPhone X的到来并不会带来太大影响，iPhone X与iPhone 4.7’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异
 
iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point（134 px，@2x）
对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。
由于 iPhone X的屏幕比例发生变化，对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响，需要对页面结构进行适当微调。
最后，如果应用程序需要隐藏状态栏，请重新考虑iPhone X上的布局。iPhone X的显示高度相对于iPhone 4.7''提供了更多的内容高度，状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。

From： http://bbs.zhulong.com/101010_group_100224/detail31160444

iPhoneX设计尺寸和适配的更多相关文章

  1. h5 在全屏iphonex中的适配

    iphonex 已经上线有一段时间了,作为业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,,所以需要对iphonx 适配,下面就详细说说如何适配 先看一张适配前后的图: iphonex 提供的 ...

  2. 适用于hips ui的iPhoneX及以上适配方案

    版本信息: hips ui: 0.1.43 须知: 随着hips ui的迭代,可能会解决适配问题,所以下面的方案是有时效性的. 如果你项目上很紧急,可以直接看第三部分解决方案,复制粘贴代码即可. 一. ...

  3. 如何写一个适配iPhoneX的底部导航

    引言 iPhoneX发布至今已经有将近一年的时间了,各类app都多多少少做了对iPhoneX的适配,那对于我们H5页面该做哪方面的适配呢? 首先了解安全区域(safe area)的概念,它保证了内容在 ...

  4. iOS iPhoneX/iPhoneXS/iPhoneXR/iPhoneXS Max系列适配

    以前异性屏只有一款iPhoneX,所以在适配的时候直接判断高度是否等于812即可判断是否是iPhoneX #define IS_IPHONE_X (IS_IPHONE && SCREE ...

  5. OC和Swift中的UITabBar和UINaviGationBar的适配 [UITabbar在IPad中的适配]

    作者 sundays http://www.cnblogs.com/sundaysgarden/ OC中UITabbar的适配[iphoneX和Ipad适配] 自定可以UITabar 自定义UITab ...

  6. h5页面适配iPhone X的方法

    一.原生适配iphoneX 原生适配很简单,查看机型图:   只要用 #define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>8 ...

  7. cocos2d-x屏幕分辨率，窗口大小总结

    这个东西很烦人,相信很多人都不理解 今天来总结一下,首先有很多概念都要事先弄得清楚明白 1.屏幕分辨率 所谓屏幕分辨率相信很多人都知道他的概念,不就是1280pxX720PX吗?不就是这种形式吗?有什 ...

  8. 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

    @media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min ...

  9. 学习WEB前端是应该自学还是参加培训机构？

    先说观点,我强烈建议每个人都要自学,不要参加培训班. 我干web前端工程师这个职位已经有6年多的时间,之前在蚂蚁金服做过2年,后来离开是因为加班实在熬不住才走的,像这些已经上市的互联网公司几乎没有不加 ...

随机推荐

  1. check the manual that corresponds to your MySQL server version for the right syntax to use near

    一.问题 mysql插入数据时报错 sql如下 insert into t_sysconfig (servercode,key,value,remark,updatetime) values (&qu ...

  2. Form,tagName和nodeName的区别

    首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2&g ...

  3. flask 实现异步非阻塞----gevent

    我们都知道,flask不支持异步非阻塞的请求,我们可以创建一个新项目去测试一下,推荐大家使用pycharm去开发我们的flask  使用特别的方便. rom flask import Flask im ...

  4. Sql-Server 邮件相关的查询和删除

    -- 查询邮件发送记录和报告 SELECT TOP(50) * FROM msdb.dbo.sysmail_allitems ORDER BY mailitem_id DESC SELECT TOP( ...

  5. [Codeforces-888C] - K-Dominant Character

    C. K-Dominant Character time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  6. 【Unity】 Cursor学习

    CursorLockMode.None 光标行为未修改,第一人称视角下鼠标可以突破窗口. CursorLockMode.Locked 光标锁定到游戏窗口的中心,与全屏与否无关,同时隐藏光标(这一点在3 ...

  7. Golang 2018.1.2激活及使用技巧

    对于做Java开发的同学使用最熟练的开发工具应该当属Eclipse了吧,但是做到后面的话一般都会转用Intellij Idea.至于转用Intellij有什么好处我就不赘述了,简言之就是功能强大,使用 ...

  8. exec命令详解

    基础命令学习目录首页 原文链接: exec: 在bash下输入man exec,找到exec命令解释处,可以看到有”No new process is created.”这样的解释,这就是说exec命 ...

  9. JVM调优(2)

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...

  10. C++多态深入分析！

    以下分析是基于VS2010的.以后会使用G++分析看看G++如何处理多态! // polymorphic_test.cpp : 定义控制台应用程序的入口点. // /** 特别注意:实现C++多态,除 ...