个人经验总结

1、手机端电话书写方式，点击即刻拨打 ：<a href="tel:1111-111-1111" >1111-111-1111</a>   

2、媒体查询示例：

      

3、判断是安卓还是ios：

var u = navigator.userAgent, app = navigator.appVersion;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

        if(isAndroid==true){

           $(".download_a").attr("href","安卓下载链接");

        }else{

            $(".download_a").attr("href","ios下载链接");

          }

4、屏蔽双击选中文字的方法兼容FF及以外的浏览器

      FF用样式 ：-moz-user-select:none;

      FF以外的浏览器用：onselectstart="return false"（直接加在需要作用的标签） 

5、微信分享的图片自定义：

       

      如果不指定desc,title和图片，默认会使用网页meta的title和页面内的第一张图片

      <div style="display: none;"><img src="duanwu_weixinlogo.png" style="width: 3rem; height: 3rem;"/></div>

      要给body里面加个300*300的图片，放在页面第一位，隐藏掉就好了    图片尺寸必须大于： 300px × 300px

6、

      Css 速查表 ： http://css.doyoe.com/

      在线转化JS 文件格式：http://tool.oschina.net/codeformat/js/

      查看代码那些浏览器支持：http://caniuse.com/

7、手机、移动端实现字体自适应：

要有基本字体默认字体体大小
html{  
       font-size: 50px;
}

JS:
(function (doc, win) {

    var docEl = doc.documentElement,

    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

    recalc = function () {

    var clientWidth = docEl.clientWidth;

    if (!clientWidth) return;

    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

    };

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

 

8、用display:inline-block; 等分时，最后一项会掉下来：

      解决办法：

            1. 最外面(父级) 要font-size:0；gywm-part{font-size:0} ，子集的字体要重新定义；

            2. 可以选择直接用float：left避免出现问题；

9、类似空间点赞效果，加1，减1

      http://www.w3cfuns.com/notes/14388/6c55f67462c70fc1e5042cf1d5417bf9

10、PC端分享插件：(分享的标题，图片，链接都可以自定义)

        https://github.com/overtrue/share.js#

       一键复制：

       http://www.jb51.net/article/74251.htm

      Jquery实现无缝滚动:

       http://www.dowebok.com/demo/2013/69/   

11、 Validform 表单验证

var dxform=$("#dxform").Validform({

        tiptype:function(msg,o,cssctl){

            var objtip=$("#msgcont");

            cssctl(objtip,o.type);

            if(o.type!=2){ //状态为2表示通过验证，成功就不提示

                layer.msg(msg);
            }
        },
        showAllError:false
    });

        //  实时监听 input输入框的输入状态
         $('.search-tit input').bind('input propertychange', function() {
             $(".search-tit .search-x").show();
         });

12、JQ 模拟placeholder效果兼容IE：

$(".feedback-text").on('input propertychange blur', function() {
                var _this = $(this);
                if(_this.val() == '') {
                    $("span.palcehold").show();
                } else {
                    $("span.palcehold").hide();
                }
            });

 

13、window.location.href重新加载页面，在IE下会出现

解决办法：使用 location.href = location.href; 就不会出现弹窗了

14、页面单独在ie和chrome浏览、360极速模式下都是正常的。而当切换至兼容模式下，页面就出现样式问题。

解决办法：<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

如有问题，欢迎指正哈~~