收藏
回答

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

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

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


最后一次编辑于  2018-10-17
回答关注问题邀请回答
收藏

6 个回答

  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-10-18

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

    2018-10-18
    赞同
    回复 4
    • Huang&hUang
      Huang&hUang
      2018-10-18

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

      2018-10-18
      回复
    • spring
      spring
      2018-10-19

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

      2018-10-19
      回复
    • 大王
      大王
      2018-10-19

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

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

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

      2018-10-19
      回复
    • alipay
      alipay
      2018-10-22

      ?? 到达怎么解决?

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

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

    2019-09-11
    赞同 1
    回复
  • Vim
    Vim
    2018-11-19

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

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

    2018-11-19
    赞同 1
    回复
  • 双门人走
    双门人走
    01-08

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

    01-08
    赞同
    回复
  • 忐自™
    忐自™
    2018-11-10

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

    2018-11-10
    赞同
    回复
  • spring
    spring
    2018-10-17

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

    2018-10-17
    赞同
    回复 7
    • Huang&hUang
      Huang&hUang
      2018-10-18

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

      2018-10-18
      回复
    • spring
      spring
      2018-10-18回复Huang&hUang

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

      2018-10-18
      回复
    • Huang&hUang
      Huang&hUang
      2018-10-18回复spring

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

      2018-10-18
      回复
    • spring
      spring
      2018-10-18回复Huang&hUang

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

      2018-10-18
      回复
    • Huang&hUang
      Huang&hUang
      2018-10-18回复spring

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

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