收藏
回答

750rpx 不能适配所有屏幕,只有 375 宽度的屏幕适配

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 微信安卓客户端 7.0.20 2.19.3

这图是我在 375 的设备下开发的,看起来挺正常,上面哪些省份简称用的是 flex 布局,然后 x 使用的是固定定位,flex 内容两边留 30rpx 的宽度,绝对定位定位 30rpx 的距离,成立。

一旦换成非 375 的设备显示就出现了这种问题了,明显我这两边留空不一致,很显然,屏幕全宽 750rpx 并不适配,同时我也使用真机测试了一下,使用的是小米10,结果显示也为上面这种,并不对齐。

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

5 个回答

  • Demons
    Demons
    2021-12-13

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

    2021-12-13
    有用
    回复 1
    • 早入林
      早入林
      2021-12-14
      不是我不想给你,是你们这代码片段不争气啊,放个自定义组件都没办法,反正我是反馈了,也不会为了反馈一个bug帮你搞一个能复现没组件的代码,你们看着办吧
      2021-12-14
      回复
  • 早入林
    早入林
    2021-12-13

    开发工具ios5下的效果

    开发工具ios6/7/8下的效果

    代码

    wxml

    <view class="my-keyboard">
      <view wx:for="{{31}}">{{item+1}}</view>
      <view class="del-key">X</view>
    </view>
    


    wxss

    .my-keyboard{
      display: flex;
      flex-wrap: wrap;
      padding0 30rpx 30rpx;
      box-sizing: border-box;
      position: relative;
    }
    .my-keyboard view{
      width60rpx;
      height60rpx;
      margin-right10rpx;
      margin-top10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
    }
    .my-keyboard view.border{
      border1rpx solid #000;
    }
    .my-keyboard view:nth-child(10n){
      margin-right0;
    }
    .my-keyboard .del-key{
      width130rpx;
      /* margin-top: 10rpx; */
      /* margin-right: 0; */
      margin0;
      border1rpx solid #000;
      position: absolute;
      bottom30rpx;
      right30rpx;
    }
    
    2021-12-13
    有用
    回复
  • 武曲心
    武曲心
    2021-12-13

    60+10*x+9*y=750,x是字宽,y是间距,设置box-sizing:border-box,y取10,x就是60,这么算写死也是可以的

    2021-12-13
    有用
    回复 6
    • 早入林
      早入林
      2021-12-13
      没用的,我取的是两边的padding各30rpx,一个view60rpx,间距10rpx,算死了,x取绝对,375下right为30rpx可行,换非375的就不行了,也试过left,left590rpx在375下可行,换非375的也不行,最后只能取消绝对定位,用假数据填充距离
      2021-12-13
      回复
    • 武曲心
      武曲心
      2021-12-13回复早入林
      每个字flex弄justify-content: space-between;
      2021-12-13
      回复
    • 早入林
      早入林
      2021-12-13
      如果按你说的这样,那换行没法用了,多行得弄多个view套外面了
      2021-12-13
      回复
    • 武曲心
      武曲心
      2021-12-13回复早入林
      我试了一下,发现转换的px舍弃了小数位了,导致适配不准确,我影响里不会这样的,是不是什么时候改过
      2021-12-13
      回复
    • 武曲心
      武曲心
      2021-12-13回复早入林
      这样就不能用凑数法写样式了
      2021-12-13
      回复
    查看更多(1)
  • ㅤ
    2021-12-13

    flex没用好

    2021-12-13
    有用
    回复 1
    • 早入林
      早入林
      2021-12-13
      怎么说?
      2021-12-13
      回复
  • 微喵网络
    微喵网络
    2021-12-13

    上代码片段

    2021-12-13
    有用
    回复 3
    • 早入林
      早入林
      2021-12-13
      2021-12-13
      回复
    • 微喵网络
      微喵网络
      2021-12-13回复早入林
      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      2021-12-13
      回复
    • 早入林
      早入林
      2021-12-14
      不用了,以及被人解答了谢谢
      2021-12-14
      回复
登录 后发表内容