使用yd组件移动端高度怎么适配

Question

项目运行后，移动设备选择的不同，页面高度不能自适配（简单的画了一下示意图），出现右侧图的情况；
在没有选择不同的移动设备，页面跳转后，页面高度还是出现示意图中右侧的情况，刷新之后恢复左边正常的情况。
求解救方法

html,body,#app{
 height: 100%;
 width: 100%;
}

<yd-tabbar slot="tabbar">
    <yd-tabbar-item title="首页" link="home">
    </yd-tabbar-item>
    <yd-tabbar-item title="发现" link="#">
    </yd-tabbar-item>
    <yd-tabbar-item title="我的" link="mine">
    </yd-tabbar-item>
</yd-tabbar>