收藏
回答

小程序横屏rpx单位显示过大

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信iOS客户端 7.0.12 2.11.0

复现路径:小程序页面强制横屏"pageOrientation": "landscape", rpx单位明显过大

问题描述:竖屏状态下 ,屏幕宽度为750rpx,横屏状态下屏幕宽度为竖屏状态下屏幕的高度(大于750rpx),但rpx并未适配,导致显示过大。

预期表现:


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

7 个回答

  • hz
    hz
    2023-03-23

    横屏简单粗暴就是原本100rpx的,现在写成 calc(100vmin / 7.5);

    如果是用的框架,可以用scss的,就自己去封装个函数

    // 横屏适配 rpx 转 vmin
    @function vpx($rpx) {
      //$rpx为需要转换的字号
      @return #{math.div($rpx, 7.5)}vmin;
    }
    
    然后代码里就去写
    width: vpx(100);
    height: vpx(50);
    border: vpx(1) solid #f5f5f5
    
    2023-03-23
    有用 1
    回复
  • 熊💫
    熊💫
    2022-08-29

    有时候横屏下 rpx 计算仍然按竖屏时的屏幕宽度换算,导致页面里的一些尺寸都错了,有没有解决方案啊

    2022-08-29
    有用
    回复
  • 奔跑的蜗牛
    奔跑的蜗牛
    2021-07-02

    官方直接不解决了吧。得自己算了

    2021-07-02
    有用
    回复 1
    • like alls
      like alls
      2022-12-19
      不支持动态, 其实就没有问题了, rpx始终是相对于手机屏幕的宽度来计算, 那横屏下就不会出现bug了.
      2022-12-19
      回复
  • aLIEz
    aLIEz
    2021-04-22

    有相同问题。rpx单位数值有误差(我的也都是横屏产生的)。离谱的是,调试器中点击样式,变一下数值大小就正常了。我用px ,机型无法适配,用vw,vh好像可以解决。主要是。我这边问题是突然出现的(更新了开发者工具),我更改工作量好大,有人知道问题在哪吗?


    2021-04-22
    有用
    回复
  • 是小白啊
    是小白啊
    2020-05-21

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-05-21
    有用
    回复 13
    查看更多(8)
  • 微盟
    微盟
    2020-05-21

    你可以自己获取横屏时,实际的展示宽度来计算出对应的px

    2020-05-21
    有用
    回复
  • 刘泽坤
    刘泽坤
    2020-05-21

    用px吧,也不知道这算是适配的bug,还是以后就这样了

    2020-05-21
    有用
    回复
登录 后发表内容
问题标签