收藏
回答

如何适配iPhone X/XS等 底部安全区

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 需求 客户端 6.7.3 2.3.0

很多业务场景是在底部悬浮固定差不多与屏幕等宽的一个按钮,目前单独适配iPhone X 搜索网上大家给的方案是判断iPhone X设备之后手动针对加载不同的布局参数来抬升按钮,虽说勉强可用,这样设备判断得不断增加,也很死板(现在针对XS的model名字不知道是什么,iPhone 底部安全区的大小也许不会固定不变等等),希望官方能给个解决方案,要么给判断是有操作安全区的设备,要么参考h5适配的safe-area,感谢。


回答关注问题邀请回答
收藏

7 个回答

  • 黄思程
    黄思程
    2018-10-18

    搜索关键字:css constant safe-area-inset-bottom

    2018-10-18
    有用 1
    回复 4
    • 2018-10-18

      并没有用啊···一定要真机吗··

      2018-10-18
      回复
    • 法隆
      法隆
      2018-10-19

      官方是否考虑出一个适配的小故事帖子呢 毕竟今年又出了几款

      2018-10-19
      回复
    • 2018-10-19

      微信开发者工具——真机调试——扫码预览; CSS

      padding-bottom: env(safe-area-inset-bottom);

      没有达到预期结果。 上传预览没有问题。

      2018-10-19
      回复
    • 中文测试
      中文测试
      2018-10-22

      ?? 到达怎么解决?

      2018-10-22
      回复
  • 安逸
    安逸
    2019-09-11

    已解决,可以参考下:https://blog.csdn.net/qq_42354773/article/details/81018615,亲测真机有效,模拟器无效。

    2019-09-11
    有用 3
    回复 1
    • PaulLin
      PaulLin
      2020-03-17
      赞一个
      2020-03-17
      回复
  • Vim
    Vim
    2018-11-19

    先判断机型为ios 然后 判断屏幕高度/屏幕宽度>1.78(普通苹果手机比例为16/9)

    符合以上条件 底部增加68rpx

    2018-11-19
    有用 2
    回复
  • 慢慢。
    慢慢。
    2020-07-14

    wx.getSystemInfoSync() 获取 platform、screenHeight,然后再模拟器上不生效(platform不是 ios),真机有效。

    判断刘海系列(支付宝小程序亦通用):platform.toUpperCase() === 'IOS' && screenHeight >= 812

    然后页面适配,目前我只能一个一个适配,暂时没有或者没有找到其他更好的方法。

    安全区域的高度是 68rpx

    2020-07-14
    有用
    回复
  • 双门人走
    双门人走
    2020-01-08

    可以根据 statusBarHeight 和 是不是为 ios 来做适配

    2020-01-08
    有用
    回复
  • 忐自™
    忐自™
    2018-11-10

    这个是刚需啊,还是麻烦解决下。。

    2018-11-10
    有用
    回复
  • 法隆
    法隆
    2018-10-17

    像我是判断屏幕高度的,可能不用型号这么麻烦。。。

    2018-10-17
    有用
    回复 7
    • 2018-10-18

      目前你用屏幕高度来判断是X/XS这两台设备吗,那就是说XR/XSMAX也得另外加咯?

      2018-10-18
      回复
    • 法隆
      法隆
      2018-10-18回复

      不是。。我这里的需求是只要全面屏的 就适配底部大按钮 不光是X/XS 要单独适配X/XS的话就得用model了 而且听说现在微信获取XS/XS MAX还有问题,最近还有华为MATE20系列。。哎 希望官方尽快更新吧

      2018-10-18
      回复
    • 2018-10-18回复法隆

      并不是全面屏都有手势区的啊··有虚拟键的栏得到到高度会自动扣除吗?

      2018-10-18
      回复
    • 法隆
      法隆
      2018-10-18回复

      我这里并不是因为手势区才调整这个  你可以用官方提供的tabbar看看 全面屏的比一般的高。。

      2018-10-18
      回复
    • 2018-10-18回复法隆

      我这边是通常要有这按钮的界面没有Tabbar控件····😆

      2018-10-18
      回复
    查看更多(2)
登录 后发表内容