移动端的那些坑

0.ios里fixed定位的问题

首先我们来看一个结构：

<div class=‘header‘>....</div>
<div class=‘main‘>....</div>
<div class=‘footer‘>
    <textarea></textarea>
</div>

其实就是最基本的上中下布局而已，问题是header和footer需要分别fixed到头部和底部。

遇到的都知道在ios的safari里面不支持position:fixed, 其实也不算是不支持，只是在软键盘弹出来的时候使用fixed的元素就开始各种抽风了。

解决方法：在键盘弹出来之前按照正常的定位，使用fixed，弹出来的时候将footer这部分position:static;然后这样footer就会跑向页面的最下面了，然后再将页面主动滚动到底部，当blur的时候再把footer设置回去。

1.textarea的focus问题 

这次有个需求是点击main的某个元素，需要textarea获取焦点并弹出软键盘。其实这些都不是关键。问题是在点击main的该元素的时候，还是需要跑个ajax判断下能否进行评论，这样一跑ajax就获取不了焦点了。

解决方法：其实为啥使用了oTextarea.focus()不管用，其实就是中间的这层ajax使用了异步了。这样浏览器以为这是两件事，处于安全性考虑它给禁止了，然后将ajax改成同步的就OK了。

同样在window.open()的时候也会遇到这个问题，解法相同。

2.在特定的android的机子(vivo...)里，在键盘收起来不会失焦

本来是在失焦的时候触发了一个blur事件的东西，这样就会出现问题。

解决方法：

(function() {
  var height = window.innerHeight;
  function loop_height() {
    setTimeout(function() {
      if (window.innerHeight > height + 200) {
        //触发blur事件
      } else {
        height = window.height;
      }
    }, 1000);
  }
  loop_height();
})();

其实就是一直获取页面的可视高度，在键盘弹出来的时候键盘的部分不算innerHeight;这样在键盘收起来的时候就能知道了，如果感觉时间比较长可以把setTimeout的时间改小一点，默认在少于300ms的时候感觉不出页面的迟钝。

3.在微信内zepto的方法不触发(偶发)

解决方法：这个大家就都知道了，改成原生的就成了呗

4.在微信内textarea focus的时候弹出键盘，会遮盖一部分textarea的元素(偶发,特定机型)

解决方法：在focus事件的最后

$body.scrollTop(
    $body.get(0).scrollHeight + $("textarea").height()
);

就是让页面主动滚动下，反正textarea在最底部，那么就把页面滚动到最底下就成了。

移动端的那些坑

原文：https://www.cnblogs.com/luov/p/10818790.html