移动端常见小问题总结

1、移动端页面上下滑动时发生卡顿的情况，很不流畅

在该元素的css上添加以下样式

{
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

 

2、扫描二维码时，判断扫描容器

let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    ...    //微信
} else if (ua.match(/AlipayClient/i) == 'alipayclient') {
    ...    //支付宝
}

 

3、input输入框在得到焦点时，去掉外边框默认颜色

input:focus { outlint: none; }

 

4、移动端常显滚动条，并调整滚动条样式

假设要显示滚动条的元素是.list，示例如下：

.list {
    overflow: hidden;
    overflow: auto;
    height: 100px;
}
.list::-weblit-scrollbar-track-piece {    //内层轨道
    background-color: rgba(0,0,0,0);
    border-left: 1px solid rgba(0,0,0,0);
}
.list::-webkit-scrollbar {    //滚动条整体样式
    width: 5px;
    height: 13px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.list::-webkit-scrollbar-thumb {    //滚动条里的小方框
    background-color: rgba(0,0,0,0);
    background-clip: padding-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    min-height: 28px;
}
.list::-weblit-scrollbar-track {    //滚动条里的轨道
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.list {
    background-color: rgba(0,0,0,0.5);
    background-clip: padding-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

 

5、禁止复制选中文本

element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

6、JavaScript获取URL中的参数

适应以下两种模式，来获取url参数值：

/User/vip_card_manager/useless/219/id/18

/User/vip_card_manager?useless=219&id=18

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    var q = window.location.pathname.substr(1).match(reg_rewrite);
    if(r != null){
        return unescape(r[2]);
    }else if(q != null){
        return unescape(q[2]);
    }else{
        return null;
    }
}
console.log(getQueryString("useless"));

 

7、动态插入script，并在加载完成执行callback

function  loadScript（url, callback） {
    let script = document.createElement('script');
    if (script.readyState) { // IE
        script.onreadystatechange = function () {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {    //IE浏览器
                script.onreadystatechange = null;
                callback();
            }
        } 
    } else { // 其他浏览器
        script.onload = function () {
            callback();
        }
    }
    script.src = url;
    document.getElementsTagName('head')[0].appendChild('script');
}

readyState有几种状态，但是有些状态会被跳过，按顺序如下：

• 0 uninitialized - 还未开始载入 
• 1 loading - 载入中 
• 2 loaded 
• 3 interactive - 已加载，文档与用户可以开始交互 
• 4 complete - 载入完成 

 

8、长时间按住页面出现闪退

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

 

9、去除移动端输入框默认内阴影

element {
    -webkit-appearance: none;
}

 

10、去除移动端点击元素时出现半透明的遮罩

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