uniapp搞定了iPad适配分享

uniapp获取元素宽高

有时候适配屏幕很头疼，但是不得不解决适配问题，很多手机、平板各个屏幕的尺寸都不一样。而且使用upx、rpx都可能适配的不是很好，比如：ios使用flex布局，在iPad上就有问题，会下沉，布局和想象的不一样，所以要计算当前的元素高度来调整：

错误的布局:

很明显本来是在底部导航栏上面的，可是到了导航栏下面了

解决

将布局分成底部导航栏和上面的布局分成两个子布局
获取到布局的高：

设置元素的id

<view id="bodyContainer" class="body">
.body {
		height: 100%;
		width: 100%;
		background-color: #888586;
		flex-direction: column;
	}

获取元素的高度

const height = document.getElementById(‘bodyContainer’).clientHeight;

减去底部导航栏的高度

let rpx80 = uni.upx2px(80);
this.offHeight = (query - rpx80*2)+'px';（必须乘以2，不知道什么原因）

设置动态样式

<view class="body-swiper" :style="{height:offHeight}">

底部导航栏

	.footer {
		position: fixed;
		bottom: 0;
		height: 80rpx;
		width: 100%;
		color: aquamarine;
		background-color: #888586;
		}

最终的效果：

一个小白，请指正！