移動端從入坑到出坑——2016.8.2 更新

1.局部滾動

項目名稱：果之友
地址：http://www.guozhiyou.com/Inde...
問題描述：要將紅色的這塊作局部滾動。

解決辦法：先經過window.innerHeight讀取到當前屏幕的高度，而後經過減去header和footer的高度，獲得div的高度而且賦值上去，同時設置overflow:scroll，成功實現彈性滾動。但設置爲局部滾動後會發現ios端和android端失去了滾動彈性，這裏咱們採起下面css來使滾動條恢復彈性。

overflow:auto;/* android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */

2.移動端頁面Input虛擬鍵盤彈出Fixed元素跟隨頁面滾動，fixed屬性失效

bug頁面佈局以下：

index.html
<!-- fixed定位的頭部 -->
<div class="wrap">
<header>

</header>

<!-- 能夠滾動的區域 -->
<main>
  <div ng-repeat="index in vm.arr"> 
    {{index}}
  </div>
</main>

<!-- fixed定位的底部 -->
<footer>

</footer>
</div>

index.css
    //px計算
@function px2rem($px) {
    $rem: 75px;
    @return ($px/$rem) + rem;
}

*{
  margin: 0;
  padding: 0;
}

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

.wrap{
  width:100%;
  height:100%;
  font-size: px2rem(32px);
}

header {
    position: fixed;
    height: px2rem(100px);
    line-height:px2rem(100px);
    left: 0;
    right: 0;
    top: 0;
    background-color: #efefef;
}

footer {
    position: fixed;
    height: px2rem(80px);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #efefef;
    input{
      height:px2rem(60px);
      margin-top:px2rem(10px);
    }
}

main {
    margin-top: px2rem(100px);
    margin-bottom: px2rem(80px);
    // height: px2rem(2000px);
    font-size:px2rem(36px);
}

在input虛擬鍵盤未觸發時fixed屬性正常，以下圖：

而後激活虛擬鍵盤，fixed屬性失效，以下圖：

解決方法：因爲是在虛擬鍵盤激活後，頁面 fixed 元素失效，致使跟隨頁面一塊兒滾動，那麼 若是頁面不會過長出現滾動，那麼即使 fixed 元素失效，也沒法跟隨頁面滾動，也就不會出現上面的問題了。所以咱們用flex佈局的方式將body的全局滾動替換爲main的局部滾動從而避免整個頁面發生滾動。
html結構不變動改css以下：

//px計算
@function px2rem($px) {
    $rem: 75px;
    @return ($px/$rem) + rem;
}

*{
  margin: 0;
  padding: 0;
}

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

.wrap{
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
  width:100%;
  height:100%;
  font-size: px2rem(32px);
}

header {
    width:100%;
    height: px2rem(100px);
    line-height:px2rem(100px);
    background-color: #efefef;
}

footer {
    width:100%;
    height: px2rem(80px);
    background-color: #efefef;
    input{
      height:px2rem(60px);
      margin-top:px2rem(10px);
    }
}

main {
  -webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;
  overflow:auto;
  -webkit-overflow-scrolling: touch; //爲局部滾動恢復彈性
}

如上圖，虛擬鍵盤彈出後頁面仍然正常。
後續還會持續更新，移動端遇到bug的小夥伴們也歡迎在評論中提出，會盡力幫助解決。

3.移動端rem適配後橫豎屏切換時頁面過大或者太小

解決方法：監聽orientationchange當橫豎屏切換後從新計算html的fontSize值。

window.addEventListener('orientationchange', function(event){
    if ( window.orientation == 180 || window.orientation==0 ) {
        document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
    }
    if( window.orientation == 90 || window.orientation == -90 ) {
        document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
    }