CSS 资料总结

1、H5表单禁止复制、粘贴的方法

（1）、HTML

    //禁止复制： <input type=text value="fdg" size=50 onselectstart="return false"> 
    //禁止粘贴： <input type=text value="fdg" size=50 onpaste="return false">

（2）、CSS

     //禁止用户 长按选择复制粘贴---css 
    -webkit-user-select: none; 
    -moz-user-select: none;
    user-select:none;

---

2、禁止复制粘贴

        *:not(input):not(textarea):not(select),
                input[type=image],
                input[type=file],
                input[type=submit],
                input[type=button],
                input[type=reset] {
                -webkit-user-select: none;
            }

---

3、通过 js，去强制 input 元素获得焦点。

element.on("tap",function(e){element.focus();});

---

4、清除浏览器自己的缓存

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
        <meta http-equiv="expires" content="0">

---

5、H5穿透点击

css实现

pointer-events:none;

js判断 实现

考虑到某些浏览器不支持CSS3 pointer-events属性，因此，在实际应用的时候，可能要对不同浏览器做不同处理，这个时候就需要判别当前用户浏览器是否支持pointer-events. 下面就是JS实现验证的代码：

var supportsPointerEvents = (function(){
  var dummy = document.createElement('_');
  if(!('pointerEvents' in dummy.style)) return false;
  dummy.style.pointerEvents = 'auto';
  dummy.style.pointerEvents = 'x';
  document.body.appendChild(dummy);
  var r = getComputedStyle(dummy).pointerEvents === 'auto';
  document.body.removeChild(dummy);
  return r;
})();

//直接代码（基于jQuery）：
function noPointerEvents (element) {
    $(element).bind('click mouseover', function (evt) {
        this.style.display = 'none';
        var x = evt.pageX, y = evt.pageY,
        under = document.elementFromPoint(x, y);
        this.style.display = '';
        evt.stopPropagation();
        evt.preventDefault();
        $(under).trigger(evt.type);
    });
}

---

6、解决 UC 浏览器、微信浏览器以及 android 低版本浏览器 的兼容性问题

（1）display:flex

在android 平台的UC浏览器和微信浏览器中使用 display：flex 会出问题

解决方案：

使用 display:flex; 的时候需要加上 display:-webkit-box;

 display:flex;
 display:-webkit-box;

即可!


（2）flex:1

使用flex:1的时候要加上，

 -webkit-box-flex:1;
 -moz-box-flex:1;
 -ms-flex:1;

（3） 使用 align-items:center; 的时候需要加上 -webkit-box-align:center`

（4）使用 flex-direction:column; 的时候需要加上：

   -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    box-orient:vertical;

---

7、H5性能优化

http://isux.tencent.com/h5-performance.html

---

8、针对$.load()函数，在调试js代码比较困难的时候，在要load的js头部加上这句话即可

    //@ sourceURL=msgprompt.js（异步加载的js）

注：上面这行代码，必须要放在异步执行的js头部才行，经过测试，Zepto1.2的$.load()函数不好使，
使用 Jquery1.8.3即可正常使用！

---