vue+html5 手机页面的兼容问题

1、input 搜索框被键盘遮盖的问题

• 自定义结构，框架封装好的搜索组件有遮盖的bug。

<div class="header-search">
     <form class="search-box" action="javascript:void 0">
          <img 
              class="search-box-icon" 
              src="../../assets/img/filterBtnF.png" 
              alt="">
             <input 
                ref="search" 
                class="search-box-input" 
                v-model="search" 
                :placeholder="placeholder" 
                @input='changeSearch'
                @keyup.13="searchClick"
                type="text">
              <img 
                v-if="search" 
                @click="clearSearch" 
                 class="search-box-close" 
                 src="../../assets/img/filterBtnClear.png" alt="">
         </form>
        <span  class="search-submit" @click="searchClick">搜索</span>
 </div>

.header-search{
    margin-top:44px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 2px 14px 6px 12px;
}
.search-box{
    -ms-flex: 1;
    flex: 1;
    height: 32px;
    -ms-flex-align: center;
    border-radius: 5px;
    padding: 0 8px 0 10px;
    background-color: #EEEFF0;
}
.header-search .search-box .search-box-icon{
    width: 16px;
    height: 16px;
}  
.search-box-input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding:9px 0;
    height: 14px;
    border: 0;
    background-color: transparent;
    //-webkit-box-shadow: unset;
    font-size: 14px;
    color: #999999;
    width: calc(100% - 40px);
}
.header-search .search-box .search-box-close{
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.header-search .search-submit{
    margin-left: 14px;
    font-size: 16px;
    color: #04A174;
    cursor: pointer;
    line-height:16px;
}

2、安卓手机滚动内容，滚动区域多出一条黑线

• 在div内的内容需要滑动，并且该div需要加上定位的话，那定位就用fixed固定定位，否则的话，在Android上，当你滑动该div上的内容时，会莫名的出现一条黑线，话不多说，直接上图；

  
  
  1.png