移动端开发捡坑

1. Android 系统对body 使用fixed定位并设置背景或者设置高度为百分比时，键盘弹出会覆盖掉input 标签和部分页面并挤压body背景

• 原因：键盘的弹窗会压缩窗口高度，而body百分比高度是以父元素为准的，所以body实际高度减少，背景压缩
• 解决方法： 根据屏幕高度动态设置body高度

2. IOS 系统下fixed 定位的底部navbar，当点击input弹出键盘之后，navbar被推到键盘上当

• 原因：fixed是参照屏幕定位的，键盘弹出实际上压缩了屏幕的高度，自然会造成
• 解决方法：input 聚焦时将navbar设置为absolute定位或者隐藏。

3. Android 下ontouch事件失效，长按会选中文本

• 解决方法：设置body的ontouch的处理函数中设置prevent Default
  IOS下取消长按选中文本

html,body{
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }

取消a链接和img的弹出菜单

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

Android还需要额外加上JS

window.ontouchstart = function(e) {
      e.preventDefault();
};

或者引入移动端手势的polyfill库hammer.js
https://github.com/hammerjs/hammer.js/blob/master/README.md
或者zepto

4. Form组件的样式

• 解决方法：用label 伪装成输入框并将for 属性指向隐藏的input 标签

5. 移动端的视频播放问题

• 解决方案：Android 和iOS 采取动态插入video 标签的方法（移动端video标签会默认全屏播放，退出全屏后视频弹窗会仍然显示，影响体验），而iPad 和桌面端采用视频弹窗的方式