发现在ios 手机上 不显示地图
地图页面 顶部是 标题 中部是 地图 底部是信息框 底部高度变化 中部充满剩余空间
image.png
.map {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
在页面中 中间地图 设置 flex-grow: 1; 充满剩余屏幕 但是ios不显示 地图
height: 100%;
flex-grow: 1;
1. flex: 1;改成 flex-grow: 1; 就行了
还是不行
2.设置一个实际的高度可以
height: 100px;
main { flex: 1;height: calc(100% - 75px); }复制代码
data() {
return {
screenWidth: document.body.clientWidth, // 屏幕宽
screeHeight: document.body.clientHeight, // 屏幕高
}
做法是 求出屏幕的高度 减去 信息框的高度 赋值给地图 就可以了
3.也可以 加个 position: absolute; 让地图充满屏幕 底部信息框 就是 浮在上面 而已
地图高度 是 页面高度减去 标题 就行 如下
height: calc(100% - 50px);
