移动端bug之解决方式 - 熊翠_H5之家 - 中国HTML5教程资源分享第一站

1、Android中元素被点击时产生的边框:

* { -webkit-tap-highlight-color: rgba(250,250,250,0); /*更改点击事件的焦点色*/}

2、去除移动端输入框内阴影:

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

3、禁止文字选中内容:

.div {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移动端不需要） */
-ms-user-select: none; /* IE 10+ */
}

4、解决在移动端1px显示2px视觉效果：

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #adadad;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

retina屏1px问题

原因：

设备像素比(device pixel ratio,简称dpr) = 物理像素 / 设备独立像素；

css中的1px,也就是设备独立像素，并不等于移动设备的1px(物理像素)，这些由于不同的手机有不同的设备像素比。

解决方案：

1.通过viewport + REM的方式来兼容。

目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。淘宝M首页就是这种方案。

在devicePixelRatio = 2 时，输出viewport

<meta content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport

<meta content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-

scale=0.3333333333333333, user-scalable=no">

5、苹果得微信页面有一串数字的话，这个数字会加上a标签:

6、图片在线压缩：

7、获取URL上的参数

/**
   * 方法说明：获取URL上的参数
   * 创建时间：2014-06-19 YYF
   * @param name
   * @returns
        */
   function getUrlParam(name) {

       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

       var r = window.location.search.substr(1).match(reg); //匹配目标参数

       if (r != null)
       return unescape(r[2]);
       return null; //返回参数值
   }

8、css3垂直居中：

display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;

9、进入微信公众号页面地址：

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIyUwMjQ4OA==#wechat_redirect

10、去除textarea默认样式：

outline:none;resize:none;

11、input placeholder更换字体颜色：

::-webkit-input-placeholder{color:#f00;}

12、css3 animation动画加多个：

#demo {
    /* 指定动画名称 */
    animation-name: animation1, animation2;
    /* 指定动画时长 */
    animation-duration: 2s 1s;
}

13、隐藏微信右上角分享按钮：

//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
        document.addEventListener("WeixinJSBridgeReady", function () {
            // 通过下面这个API隐藏右上角按钮
            WeixinJSBridge.call('hideOptionMenu');
        }, false);

14、如果在微信页面右上角隐藏了分享按钮，跳转新的页面都不能分享了，新的页面必须重新打开微信的分享按钮：

15、关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题:

1，加上：document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

2，把滚动条设置为隐藏：vScrollbar: false

3，尽量去掉不必要的滚动监听事件

以上完美解决了移动端滚动不流畅的问题