直接看错误的页面
这是正常的页面
可以明显的看到上面的部分被压缩了.
因为数据安全,打码了,数据区域用红框圈住.
截图没有截全,底部是列表数据
在安卓和新版本的ios上面没有问题,目前测试的13.6以下的ios版本有问题.
定位到的问题是,flex布局和overflow:auto有冲突
display: flex;
flex-direction: column;
overflow: auto;
当前页面的根标签使用了这三个属性
解决办法:
不使用flex布局
只留下下面的代码
overflow: auto;
为了验证这个问题,我自己做了一个小测试
这是正常的页面
这是使用错误写法的页面(苹果13.6以下的同事的手机)
使用了flex布局和auto;
可以看到顶部的标签被压缩了,复现了问题(个人写法,没有全部按照项目中其他标签的样式写,所以没有全部复现)
这个是页面代码,有兴趣的朋友可以自己测一下,或者按照这种布局,页面根节点使用错误的代码,就能复现.
<template>
<div class="body">
<div class="info">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="center">
<div class="value">
这是值:10000
</div>
</div>
<div class="list">
<div class="box" v-for="(item,index) in list" :key="index">
<div class="name">
{{item.name}}{{index}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'test',
data() {
return {
list: [{ name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }, { name: 1 },]
}
},
computed: {
},
methods: {
},
mounted() {
},
}
</script>
<style>
.body {
display: flex;
flex-direction: column;
overflow: auto;
height: 100vh;
}
.info {
margin: 10px 0px;
background: #cccccc;
display: flex;
justify-content: center;
}
.left,
.right {
padding: 20px;
font-size: 25px;
}
.center {
padding: 40px;
background: #cccccc;
margin: 20px 0;
font-size: 25px;
}
.list {
flex: 1;
}
.box {
padding: 20px;
margin-bottom: 1px;
background: #cccccc;
}
</style>
html元素,body元素,和id=app的标签都是height:100%
