移动端如何快速适配iPhoneX？笔者总结了以下几点，希望对大家有所帮助。在iPhoneX发布一周后，AppleAppStore终于发布了新版本。更新日志显示：全面优化适配iPhoneX，大部分APP已经适配iPhoneX，但毕竟是临时版本。未来如何深度适配iPhone？X？欢迎大家一起讨论~我们以农药大王为例。11月8日持续更新，虽然没有大黑边，但用黑色渐变色冲淡了“刘海”的突兀感，也加入了iPhoneX的高帧率。mode，但之前版本homebar的退出逻辑需要滑动两次确认操作，现在改为滑动后立即退出。这个交互设计不知道欺骗了多少玩家，部分显示的内容还是被“刘海”挡住了。~吐槽完毕，开始进入正题。移动端如何快速适配iPhoneX？个人总结可以快速从以下几点入手，降低黑指数。1.比例和像素变化iPhoneX的显示宽度为4.7英寸，与iPhone一致，但iPhoneX的高度比iPhone7高了145pt，内容的垂直显示空间增加了约20%。iPhoneX的内容体验更窄更长，所以内容按钮和按钮要根据iPhoneX的比例重新优化。iPhoneX的像素分辨率达到1125x2436px，458ppi，官方称其为Super视网膜屏幕。关键点是使用三重图像。官方建议尽可能多的使用PDF矢量图，这样可以得到更好的显示效果，也可以减小app的体积。这张配置对比图可以让你直观的了解X的变化。2.全面屏设计iPhoneX的状态栏从20pt变成了44pt。为了加装前置镜头、红外等更多的传感器，出现了花样。如果项目中隐藏了导航栏，并且添加了自定义按钮，需要注意这里的适配。最重要的是，如果用户打电话或使用导航，高度不会改变。这在其他iPhone上也是一样。但毕竟状态栏处于非安全区域。除非状态栏可以通过隐藏状态栏给用户带来额外的价值，否则最好把状态栏还给用户。为了让屏幕尽可能的大，屏幕的四个角都做了圆角处理。显示的设计布局需要填满整个屏幕。黑色状态栏。一些老项目，APP在iPhoneX上运行时，发现屏幕不全，上下有黑区。可能没有和xib或者SB适配，会导致整个项目运行不完整。解决办法是开始图片的大小为1125×2436。在项目设置中，直接使用LaunchScreen.xib或LaunchScreen.storyboard配置启动画面，这样项目就会完整显示。3.FacelIDiPhone曾经使用TouchID来解锁设备或执行密码锁定操作。iPhoneX通过顶部传感器实现面部识别。应用程序中会有一些新的用户界面，以确保用户在激活时不参考TouchID，需要更换。这是面部识别码。4.Home指示条为了达到全面屏的效果，iPhoneX去掉了物理Home键，取而代之的是一个134x5pt的虚拟Home指示条。底部标示为全局系统操作，用于返回桌面和切换程序。考虑到手势冲突，这部分也要避免交互控件，以免给农药之王造成尴尬。设计自定义键盘时，无需向键盘添加表情符号或听写按钮。因为它会自动添加到键盘下方的Home键区域。5.安全区域布局对于iPhone8及之前的iPhone，由于屏幕是整齐的矩形，所以安全区域是整个屏幕。但是iPhoneX的全面屏空间、圆角、Home指示条都让屏幕交互变得非常困难，所以屏幕应该被划分为矩形，重要的内容应该放在屏幕的安全区域，以保证内容永远不会被阻止。划分安全区：当手机竖屏时，安全区的上边缘距离屏幕顶部44pt，所以安全区并不是完全与刘海齐平，而是稍微往下一点。由于底部的安全区，UITabBar在iPhoneX上的高度从49pt变为83pt。为了给Home指示条留出足够的空间，它被认为是一个安全区，从下到上34pt开始。当屏幕水平转动时，安全区域再次发生变化。Home指示条被移至屏幕底部，而刘海和Home指示条的安全范围保持不变，只是水平安全区域被“压缩”得更窄更长。确保重要内容位于安全区域并使用对称插图，以免它们被刘海或圆角切断。如果您使用自动布局，您的内容将自动适合安全区域，因此您的设计不会被缺口或主页按钮后面遮挡。
