微信浏览器打开页面后，安卓的手机有个bananer，bananer上的文字会随着屏幕滑动而滑动，要怎么整？

Question

问题：
1、在安卓手机上，红色框的内容会随着滑动屏幕而滑动。
在浏览上测试没有问题也是固定的，但是只要在微信中打开，“关于尿酸的七大误解 与右边的箭头会随着着手的滑动而滑动”
2、在IOS手机上，整个内容都偏向左上角，刷新没反应，感觉就是完全不适配

我要的效果是像这样固定死的，怎么实现？
下面是我的代码：

<!--bananer-->
        <div id="coverDiv" class="mui-slider">
            <div class="mui-slider-item">
                <img id='coverTitleImg' src="" alt="fengmian" class="img">
                <div class="coverTitleBGDiv">
                    <!--一开始是coverTitleDiv的内容放在这里的-->
                </div>
                <div class="coverTitleDiv">
                    <div id='coverTitle' class="covertTitleLable"></div>
                    <img src="../img/share/right_arrow.png" class="covertTitleImg" alt="">
                </div>
            </div>
        </div>

.covertTitleLable{
    position: fixed;
    top: 156px;
    z-index: 10;
    color:#FFF;
    -webkit-align-self:center;
    -ms-flex-item-align:center;
    align-self:center;
    margin-right:10px;
    font-size: 16px;
}
.covertTitleImg{
    position: fixed;
    z-index: 10;
    right: 5px;
    height:20px;
    width:20px;
    top: 156px;
    right:8%;
}

@media only screen and (min-width: 320px) {
    .contentTitle {
        width: 180px;
    }
}

@media only screen and (min-width: 360px) {
    .contentTitle {
        width: 220px;
    }
}

@media only screen and (min-width: 375px) {
    .contentTitle {
        width: 230px;
    }
}

@media only screen and (min-width: 414px) {
    .contentTitle {
        width: 270px;
    }
}