小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序在模拟器和安卓手机上显示都挺好的，但是苹果手机显示不正常，好多内容重叠了（见截图），地图应该在页面底部显示的，现在地图把中间的列表循环都遮盖了。
请大神指点，该怎么调整？谢谢！
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你把容器的高度定死了，内容自然会发生挤压了吧...
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
解决了吗？安卓和电脑的苹果虚拟器都没有问题，真实的iphone11就出问题了
贴下可复现问题的代码片段，我试试。。https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
这是.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 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>
<text class='data-title-text'>{{title2}}</text>
<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>
<text class='data-title-text'>{{title3}}</text>
<!-- <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">
<image class="thlogo" mode="widthFix" src='{{imglogourl}}'></image>
<text class='data-title-text' space="nbsp">{{THSD}}</text>
这是.wxss代码：
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.title-text {
font-size: 32rpx;
font-weight: bold;
margin: 20rpx;
.image {
width: 100%;
.status-container{
flex-direction: row;
flex-wrap: wrap;
.status-box{
align-items: center;
justify-content: space-around;
width: 50%;
font-size: 24rpx;
height: 80rpx;
.status-text {
color: green;
font-size: 26rpx;
.data-container{
.data-box{
justify-content: center;
width: 32%;
border: 1rpx solid silver;
margin: 1rpx;
height: 200rpx;
.data-text {
font-weight: bolder;
.data-title-text {
color: silver;
.map {
height: 450rpx;
.button{
.footer {
margin-top: 20rpx;
.thlogo{
width: 100rpx;
height: 100rpx;
苹果是所有机型吗，还是部分机型，一般是兼容性
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
解决了吗？安卓和电脑的苹果虚拟器都没有问题，真实的iphone11就出问题了
贴下可复现问题的代码片段，我试试。。https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
flex-direction: column;
这两行删掉吗？
这是.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;
}
苹果是所有机型吗，还是部分机型，一般是兼容性