收藏
回答

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

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

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

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

4 个回答

  • Reiky
    Reiky
    07-09

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

    07-09
    有用
    回复 1
    • Tony-博
      Tony-博
      07-09
      哦,把这个高度删掉还是改成什么?
      07-09
      回复
  • 仙ღ₅₂₀¹³¹⁴
    仙ღ₅₂₀¹³¹⁴
    07-09

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

    07-09
    有用
    回复 5
  • Tony-博
    Tony-博
    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;

      }

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

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

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