小程序如何适合iPhone X？

今天汇海小程序分享了一篇来自“知识程序”的文章，告诉大家微信小程序在改编Iphone x时，如何适应它来增强用户体验。一起看微信小程序以适应iPhone X？ iPhone X已经推出一段时间了，越来越多人使用这款带“刘海”的手机。然而，由于iPhone X的“特殊”屏幕和底部的“小白条”，许多开发人员对如何适应这个稍微奇怪的屏幕感到头痛。在小程序上，我们应该如何快速适应iPhone X？在本期中，我知道与您讨论的程序，小程序应该如何快速适应iPhone X？第二批和第三批iPhone X一个接一个地出现，本地暴君围绕它使用它。而且由于iPhone X的齐刘海引起了很多适应问题，因此这群本土暴君更多地沉浸在各种虫子中。不出所料，“豌豆王妃”小程序在某些地方也表现不佳。首先，购物车的产品详细信息页面和底部按钮栏与主页指示条（通常称为“小白条”）重叠，这使得在单击下面的按钮时可以轻松触发手势。是一个需要修复的错误，这是一个优化问题，所以我立即启动了一个iPhone X来开始研究。 Web端适配很好，具有视口元标记，以及以下处理方案。但是小程序很尴尬。从被切断的四个角的性能来看，可以推测在小程序中的视口适合默认为覆盖，但是没有可以改变的界面。 因此，网页的适应方案通过viewport-fix=cover和constant（safe-area-inset-bottom）;不适合小程序。目前，iPhone X和其他异形屏幕的小程序没有特殊的界面或字段。 小程序在iPhone X上自带的标签栏只是一个简单的白色背景栏添加，以改善原始标签栏的位置。你为什么这么说？因为这可以从我们的购物车页面看到，购物车页面的底部不是通过固定的位置:实现的;底部: 0;但顶部值是通过减去windowHeight模拟吸力底部的高度来计算的。在新版本的小程序配备了iPhone X本身之后，购物车的底部按钮被覆盖了一半，并且达到了上述结论（当然，这里猜测）。言归正传，由于没有特殊的解决方案来获取此值，我们只能通过wx.getSystemInfo接口获取设备信息。接口使用如下：其中res.model是设备的型号等。如果模型包含iPhone X该单词可以被视为iPhone X.我们在app.js中测试，但添加了一个isIpx字段全局确定模型。可以在子页面和产品列表页面的栗子中读取该值：因此，完成了适合iPhone X底角的简单解决方案。至于为什么它是68 rpx：因为iPhone X具有与iPhone 6相同的屏幕宽度，它是375 pt，但高度比iPhone 6高145 pt。 并且小程序 750 rpx=375 pt=750个物理像素，您可以通过转换得到这个结论。最后，iPhone X壕可以扫描以下小程序代码的体验，欢迎拍砖来纠正〜