移动端遇到的兼容问题或者不好的默认行为

1、IOS移动端click事件300ms的延迟

  解决方式：  
    1.禁止双击缩放 ===》 加入mate:user-scalable=no;
    2.fastclick.js
        引入fastclick.js文件
        写入代码:

if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
      }, false);
    }

            
2、移动端touch事件有穿透（点透）的问题    

    解决方式：
    1. e.preventDefault();
    2.fastclick.js
        引入fastclick.js文件
        写入代码:

if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
      }, false);
    }

3、h5底部输入框被键盘遮挡问题

    解决方式：

    var oHeight = $(document).height(); //浏览器当前的高度

    $(window).resize(function () {
      if ($(document).height() < oHeight) {
        $("#footer").css("position", "static");
      }
      else { $("#footer").css("position", "absolute"); }
    });

4、input的键盘的右下角显示搜索（2个字）

    解决方式：

<form action="">
    <input type="search" >
</form>

    input外面套一个form表单  必须有action

5、如果我们在移动端点击了搜索，form表单有action就自动提交表单

    解决方式：

        οnsubmit="return false"

<form action="" onsubmit=""return false>
    <input type="search" >
</form>

6、元素被触摸时产生半透明遮罩

    解决方式：

-webkit-tap-highlight-color:rgba(0,0,0,0);

7、ios键盘的首字母自动大写

    解决方式：

<input autocapitalize='off'>

8、ios&安卓长按保存（下载）图片

    解决方式：

img{
      -webkit-touch-callout:none;
      }

9、ios&安卓长按选中文字

    解决方式：

-webkit-user-select:none;

10.url传值，如果有空格、汉字、特殊字符，就会转码

    
      解决方式：
        encodeURl ==》 加码
        decodeURL ==》 解码

11.如何收起键盘

      解决方式：
   

document.activeElement.blur();

12.懒加载问题   大量图片需要加载数据量庞大  可以一部分一部分的加载  就涉及到了懒加载在懒加载过程中总是有图片加载不出来  或者出现加载错误

        可以通过设置参数
       

  <script src="lazyload.js"></script>
  <script>
    $("section ul li img").lazyload({   //懒加载给谁加
      threshold: 200, //提前加载
      container: $(section) //滚动的祖先元素
    });
  </script>

13.懒加载问题    当页面在加载的时候不显示灰色的背景   可以用加载中图片来代替

       <img data-original="要加载的图片" scr="加载中图片">
      // 这里要注意  懒加载的图片属性要通过自定义属性来添加  data-original

14.移动端input的placeholder文本位置偏上的情况

      设置css  line-height:normal;

15.不同浏览器的默认最小字体不一样   如何设置小于这个大小的文字

        transform:scale();
    
16.注意在移动端要引入的文件是zepot.js

    zepot.js与jq.js的区别就是事件不同
    在zepot中使用不同的事件  要引入不同的插件
    触摸事件就要引入  touch.js  使用tap,singleTap,swiper,swiperLeft等事件

17.  input自动获取焦点：添加属性==》

autofocus="autofocus"

18.  点击空白，收起键盘

    window.addEventListener('touchstart', function () {
        document.activeElement.blur();
    });

19. 获取焦点后，修改光标颜色

    input{caret-color:yellow}

20.改变webkit表单输入框placeholder的颜色值

input::-webkit-input-placeholder {
      color: red;
    }