公告列表
公告列表
收藏
回答

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;
  padding: 0 30rpx 30rpx;
  box-sizing: border-box;
  position: relative;
}
.my-keyboard view{
  width: 60rpx;
  height: 60rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.my-keyboard view.border{
  border: 1rpx solid #000;
}
.my-keyboard view:nth-child(10n){
  margin-right: 0;
}
.my-keyboard .del-key{
  width: 130rpx;
  /* margin-top: 10rpx; */
  /* margin-right: 0; */
  margin: 0;
  border: 1rpx solid #000;
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
}
    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
      赞
      回复
请 登录 后发表内容
相关问题
相关文档