收藏
回答

小程序怎么在苹果手机上显示不正常?

小程序在模拟器和安卓手机上显示都挺好的,但是苹果手机显示不正常,好多内容重叠了(见截图),地图应该在页面底部显示的,现在地图把中间的列表循环都遮盖了。

请大神指点,该怎么调整?谢谢!

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

5 个回答

  • 我什么都做不到
    我什么都做不到
    2020-07-09

    你把容器的高度定死了,内容自然会发生挤压了吧...

    2020-07-09
    有用 1
    回复 1
    • Tony-博
      Tony-博
      2020-07-09
      哦,把这个高度删掉还是改成什么?
      2020-07-09
      回复
  • 的李先生Nicall
    的李先生Nicall
    2021-08-13

    解决了吗?安卓和电脑的苹果虚拟器都没有问题,真实的iphone11就出问题了

    2021-08-13
    有用
    回复 1
    • 的李先生Nicall
      的李先生Nicall
      2021-08-16
      我发现是我滥用了flex的原因,我把display改成了block就没有问题了。之前是这个吊样的
      2021-08-16
      回复
  • 睡前原谅一切
    睡前原谅一切
    2020-07-09

    贴下可复现问题的代码片段,我试试。。https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-07-09
    有用
    回复 6
    查看更多(1)
  • Tony-博
    Tony-博
    2020-07-09

    这是.wxml代码:

    <view class='container'>

    <text class="title-text">{{title1}}</text>

    <view wx:if="{{deviceonoff == 1}}">

    <image class="image" mode="widthFix" lazy-load src='{{imgonurl}}'></image>

    </view>

    <view wx:else>

    <image class="image" mode="widthFix" lazy-load src='{{imgoffurl}}'></image>

    </view>

    <view class="status-container">

    <view class="status-box" wx:for="{{devicestatus}}" wx:key="index">

    <text>{{item.Identifier}}</text><text class="status-text">{{item.value}}</text>

    </view>

    </view>

    <view>

    <text class='data-title-text'>{{title2}}</text>

    </view>

    <view class="data-container">

    <view class="data-box" wx:for="{{device}}" wx:key="index" data-url="{{item.logurl}}" bindtap="to_log">

    <text class="data-text">{{item.value}} {{item.unit}}</text>

    <text>\n{{item.name_cn}}</text>

    <text>{{item.name_en}}</text>

    </view>

    </view>

    <view>

    <text class='data-title-text'>{{title3}}</text>

    </view>

    <!-- <view>

    <map class="map" latitude='{{markers[0].latitude}}' longitude='{{markers[0].longitude}}' markers="{{markers}}"></map>

    <button class="button" bindtap='tapmap'>{{buttontext}}</button>

    </view> -->

    <view class="footer">

    <view>

    <image class="thlogo" mode="widthFix" src='{{imglogourl}}'></image>

    </view>

    <view>

    <text class='data-title-text' space="nbsp">{{THSD}}</text>

    </view>

    </view>

    </view>



    这是.wxss代码:

    .container {

      height: 100vh;

      display: flex;

      flex-direction: column;

    }


    .title-text {

      font-size: 32rpx;

      font-weight: bold;

      margin: 20rpx;

    }


    .image {

      width: 100%;

    }


    .status-container{

      display: flex;

      flex-direction: row;

      flex-wrap: wrap;

    }


    .status-box{

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: space-around;

      width: 50%;

      font-size: 24rpx;

      height: 80rpx;

    }


    .status-text {

      color: green;

      font-size: 26rpx;

    }


    .data-container{

      display: flex;

      flex-direction: row;

      justify-content: space-around;

      flex-wrap: wrap;

    }


    .data-box{

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      width: 32%;

      border: 1rpx solid silver;

      margin: 1rpx;

      font-size: 24rpx;

      height: 200rpx;

    }


    .data-text {

      color: green;

      font-size: 32rpx;

      font-weight: bolder;

    }


    .data-title-text {

      color: silver;

      font-size: 24rpx;

    }


    .map {

      width: 100%;

      height: 450rpx;

    }


    .button{

      width: 100%;

      font-size: 32rpx;

    }


    .footer {

      display: flex;

      flex-direction: row;

      justify-content: center;

      margin-top: 20rpx;

    }


    .thlogo{

      width: 100rpx;

      height: 100rpx;

      }

    2020-07-09
    有用
    回复
  • 醉酒浓
    醉酒浓
    2020-07-09

    苹果是所有机型吗,还是部分机型,一般是兼容性

    2020-07-09
    有用
    回复 3
登录 后发表内容
问题标签