移动端从入坑到出坑——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';
    }