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

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

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

     

          
             
              
         
        搜索
 

.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