分别创建屏幕上边框，右边框，下边框，左边框安全距离： safe-area-inset-top， safe-area-inset-right， safe-area-inset-bottom， safe-area-inset-left 使用： iOS 11 padding-top: constant(safe-area-inset-top); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); iOS 11.2 beta及其后 padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); 兼容性写法： padding-top: 10px; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); 与calc合用： padding-top: 10px; padding-top: calc(10px + constant(safe-area-inset-top)); padding-top: calc(10px + env(safe-area-inset-top)); 终！使用sass@mixin： @mixin x-padding-bottom($val:0px) { padding-bottom: $val; padding-bottom: calc(#{$val / 2} + constant(safe-area-inset-bottom)); /* no */ padding-bottom: calc(#{$val / 2} + env(safe-area-inset-bottom)); /* no */ } 注意！！！ 1、默认值为0px，不是0，原因是calc不支持与0计算。 2、小程序单位为rpx，一般都会转换为rpx，但是calc不支持，所以不允许转换，保持px。 参考文档：苹果官方文档

先上结论：生成NFC打开小程序的URL Scheme 一定要参考：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateNFCScheme.html 不要参考：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html 最近根据官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/NFC.html尝试使用NFC打开小程序时遇到问题，写入NFC标签后iPhone触碰NFC标签能正常打开小程序，但是安卓手机触碰NFC标签后能唤起微信但打开之后提示：“对不起，当前页面无法访问”。 [图片] 反复检查自己的操作以及代码逻辑都没发现问题，在社区翻遍了每一个相关问题也没看到有人说怎么解决。 [图片] 我点击这里的【URL Scheme】进入了如下页面： [图片] 然后根据这里的文档生成了一个加密URL Scheme，兴高采烈的写入了NFC标签，结果就遇到了开头那个问题。可以看到上图中有写【iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。】所以导致这样一通操作下来产生了苹果能用安卓不能用的假象，导致我处理问题的方向一直局限在这篇文档的内容中，百思不得其解。 直到！我发现了这篇文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateNFCScheme.html [图片] 按照这篇文档生成的URL Scheme写入之后安卓端和IOS端都能正常使用啦！ 官方最开始放的那个链接可能只是想整体介绍下URL Scheme这个能力，只怪我一时心急没往下仔细看，下面使用流程的第三步是有正确的文档的。 [图片] 完结撒花❀！希望对你有用！祝顺利！