小程序
小游戏
企业微信
微信支付
扫描小程序码分享
很多业务场景是在底部悬浮固定差不多与屏幕等宽的一个按钮,目前单独适配iPhone X 搜索网上大家给的方案是判断iPhone X设备之后手动针对加载不同的布局参数来抬升按钮,虽说勉强可用,这样设备判断得不断增加,也很死板(现在针对XS的model名字不知道是什么,iPhone 底部安全区的大小也许不会固定不变等等),希望官方能给个解决方案,要么给判断是有操作安全区的设备,要么参考h5适配的safe-area,感谢。
7 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
搜索关键字:css constant safe-area-inset-bottom
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
并没有用啊···一定要真机吗··
官方是否考虑出一个适配的小故事帖子呢 毕竟今年又出了几款
微信开发者工具——真机调试——扫码预览; CSS
padding-bottom
: env(safe-area-inset-
bottom
);
没有达到预期结果。 上传预览没有问题。
?? 到达怎么解决?
已解决,可以参考下:https://blog.csdn.net/qq_42354773/article/details/81018615,亲测真机有效,模拟器无效。
先判断机型为ios 然后 判断屏幕高度/屏幕宽度>1.78(普通苹果手机比例为16/9)
符合以上条件 底部增加68rpx
wx.getSystemInfoSync() 获取 platform、screenHeight,然后再模拟器上不生效(platform不是 ios),真机有效。
判断刘海系列(支付宝小程序亦通用):platform.toUpperCase() === 'IOS' && screenHeight >= 812
然后页面适配,目前我只能一个一个适配,暂时没有或者没有找到其他更好的方法。
安全区域的高度是 68rpx
可以根据 statusBarHeight 和 是不是为 ios 来做适配
这个是刚需啊,还是麻烦解决下。。
像我是判断屏幕高度的,可能不用型号这么麻烦。。。
目前你用屏幕高度来判断是X/XS这两台设备吗,那就是说XR/XSMAX也得另外加咯?
不是。。我这里的需求是只要全面屏的 就适配底部大按钮 不光是X/XS 要单独适配X/XS的话就得用model了 而且听说现在微信获取XS/XS MAX还有问题,最近还有华为MATE20系列。。哎 希望官方尽快更新吧
并不是全面屏都有手势区的啊··有虚拟键的栏得到到高度会自动扣除吗?
我这里并不是因为手势区才调整这个 你可以用官方提供的tabbar看看 全面屏的比一般的高。。
我这边是通常要有这按钮的界面没有Tabbar控件····😆
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
搜索关键字:css constant safe-area-inset-bottom
并没有用啊···一定要真机吗··
官方是否考虑出一个适配的小故事帖子呢 毕竟今年又出了几款
微信开发者工具——真机调试——扫码预览; CSS
padding-bottom
: env(safe-area-inset-
bottom
);
没有达到预期结果。 上传预览没有问题。
?? 到达怎么解决?
已解决,可以参考下:https://blog.csdn.net/qq_42354773/article/details/81018615,亲测真机有效,模拟器无效。
先判断机型为ios 然后 判断屏幕高度/屏幕宽度>1.78(普通苹果手机比例为16/9)
符合以上条件 底部增加68rpx
wx.getSystemInfoSync() 获取 platform、screenHeight,然后再模拟器上不生效(platform不是 ios),真机有效。
判断刘海系列(支付宝小程序亦通用):platform.toUpperCase() === 'IOS' && screenHeight >= 812
然后页面适配,目前我只能一个一个适配,暂时没有或者没有找到其他更好的方法。
安全区域的高度是 68rpx
可以根据 statusBarHeight 和 是不是为 ios 来做适配
这个是刚需啊,还是麻烦解决下。。
像我是判断屏幕高度的,可能不用型号这么麻烦。。。
目前你用屏幕高度来判断是X/XS这两台设备吗,那就是说XR/XSMAX也得另外加咯?
不是。。我这里的需求是只要全面屏的 就适配底部大按钮 不光是X/XS 要单独适配X/XS的话就得用model了 而且听说现在微信获取XS/XS MAX还有问题,最近还有华为MATE20系列。。哎 希望官方尽快更新吧
并不是全面屏都有手势区的啊··有虚拟键的栏得到到高度会自动扣除吗?
我这里并不是因为手势区才调整这个 你可以用官方提供的tabbar看看 全面屏的比一般的高。。
我这边是通常要有这按钮的界面没有Tabbar控件····😆