踩过的坑：
1.input实现maxlength且字符长度识别中英文【jquery】：
function getstrlen(arr) {
var len = 0;
var lenn={
truelen:0,
truen:0
};
for (var i=0; i<arr.length; i++) {
if (arr.charCodeAt(i)>127 || arr.charCodeAt(i)==94) {
len += 2;
} else {
len ++;
}
}
lenn.truelen=len;
return lenn;
}
function limitmax(str,maxnum){
var strlen=getstrlen(str);
var n=maxnum;
var res="";
if(strlen.truelen >= maxnum ){
for (var i=0; i<maxnum; i++) {
if (str.charCodeAt(i)>127 || str.charCodeAt(i)==94) {
n--
}
}
res=str.substr(0,n);
}else{
res=str;
}
return res;
}
var isInputZh = false;
$("input[name='username']")[0].addEventListener('compositionstart', function (e) {
isInputZh = true;
}, false);
$("input[name='username']")[0].addEventListener('compositionend', function (e) {
isInputZh = false;
var con=limitmax($("input[name='username']").val(),25);
$("input[name='username']").val(con);
}, false);
$("input[name='username']")[0].addEventListener("input",function(e){
if (isInputZh) return;
var con=limitmax($("input[name='username']").val(),25);
$("input[name='username']").val(con);
});2，截取指定字节长度的字符串
/*
* 截取指定字节长度的字符串
* 注：半角长度为1，全角长度为2
* str:字符串
* len:截取长度
* return: 截取后的字符串及是否截取的标记（扩展用）code=1 字符串截断 code=0 字符串未截断
*/
function cutStrByte(str, len){
//校验参数
if(!str || !len){
return {"cutStr":"","code":0};
}
var code = "1",// 默认返回code值，已截断
strLen = str.length,// 原字符串长度
cutStr;
//如果字符串长度小于截取长度的一半,则返回全部字符串
if (strLen <= len/2){
cutStr = str;
code = "0";
}else{
//遍历字符串
var strByteCount = 0;
for (var i = 0; i < strLen ; i++ ){
//中文字符字节加2 否则加1
strByteCount += getByteLen(str.charAt(i));
//i从0开始 截断时大于len 只截断到第i个
if(strByteCount > len){
cutStr = str.substring(0, i);
break;
}else if(strByteCount == len){
cutStr = str.substring(0, i + 1);
break;
}
}
}
//cutstr为空，没有截断字符串
if (!cutStr){
cutStr = str;
code = "0";
}
return {"cutStr":cutStr, "code":code};
}
/**
* 获取字节长度，全角字符两个单位长度，半角字符1个单位长度
*/
function getByteLen(val) {
var len = 0;
if(!val){
return len;
}
for (var i = 0; i < val.length; i++) {
if(!val[i]){
continue;
}
// 全角
if (val[i].match(/[^\x00-\xff]/ig) != null){
len += 2;
}else{
len += 1;
}
}
return len;
};3.css改变radio样式问题
HTML部分：
<label class="radiostyle">
<div class="bankinfo">
<span class="banklogo"><img src="img/minsheng.png"></span>
<span class="bankname">民生银行信用卡</span>
</div>
<input class="bankradio" type="radio" name="bankradio"/>
<span class="b-radio"></span>
</label>
主要CSS部分：
.bankradio{
display: none;
}
.b-radio{
display: inline-block;
border:1px solid #ccc;
width:16px;
height: 16px;
border-radius:2px;
vertical-align: middle;
margin-right: 5px;
position: relative;
}
.b-radio:before{
content: '';
font-size: 0;
width: 10px;
height: 10px;
background: rgb(143, 188, 238);
position: absolute;
left:50%;
top:50%;
margin-left: -5px;
margin-top: -5px;
border-radius: 2px;
display: none;
}
.bankradio:checked~.b-radio:before{
display: block;
}
效果：
4，移动端rem适配问题引入js
<script>
(function(win,lib){var doc=win.document;var docEl=doc.documentElement;var metaEl=doc.querySelector('meta[name="viewport"]');var flexibleEl=doc.querySelector('meta[name="flexible"]');var dpr=0;var scale=0;var tid;var flexible=lib.flexible||(lib.flexible={});if(metaEl){var match=metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);if(match){scale=parseFloat(match[1]);dpr=parseInt(1/scale)}}else{if(flexibleEl){var content=flexibleEl.getAttribute("content");if(content){var initialDpr=content.match(/initial\-dpr=([\d\.]+)/);var maximumDpr=content.match(/maximum\-dpr=([\d\.]+)/);if(initialDpr){dpr=parseFloat(initialDpr[1]);scale=parseFloat((1/dpr).toFixed(2))}if(maximumDpr){dpr=parseFloat(maximumDpr[1]);scale=parseFloat((1/dpr).toFixed(2))}}}}if(!dpr&&!scale){var isAndroid=win.navigator.appVersion.match(/android/gi);var isIPhone=win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio=win.devicePixelRatio;if(isIPhone){if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3}else{if(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2}else{dpr=1}}}else{dpr=1}scale=1/dpr}docEl.setAttribute("data-dpr",dpr);if(!metaEl){metaEl=doc.createElement("meta");metaEl.setAttribute("name","viewport");metaEl.setAttribute("content","initial-scale="+scale+", maximum-scale="+scale+", minimum-scale="+scale+", user-scalable=no");if(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl)}else{var wrap=doc.createElement("div");wrap.appendChild(metaEl);doc.write(wrap.innerHTML)}}function refreshRem(){var width=docEl.getBoundingClientRect().width;if(width/dpr>540){width=540*dpr}var rem=width/10;docEl.style.fontSize=rem+"px";flexible.rem=win.rem=rem}win.addEventListener("resize",function(){clearTimeout(tid);tid=setTimeout(refreshRem,300)},false);win.addEventListener("pageshow",function(e){if(e.persisted){clearTimeout(tid);tid=setTimeout(refreshRem,300)}},false);if(doc.readyState==="complete"){doc.body.style.fontSize=12*dpr+"px"}else{doc.addEventListener("DOMContentLoaded",function(e){doc.body.style.fontSize=12*dpr+"px"},false)}refreshRem();flexible.dpr=win.dpr=dpr;flexible.refreshRem=refreshRem;flexible.rem2px=function(d){var val=parseFloat(d)*this.rem;if(typeof d==="string"&&d.match(/rem$/)){val+="px"}return val};flexible.px2rem=function(d){var val=parseFloat(d)/this.rem;if(typeof d==="string"&&d.match(/px$/)){val+="rem"}return val}})(window,window["lib"]||(window["lib"]={}));
</script>5,ios低版本，H5设置mete标签，页面仍可以向右拖动
html{width:100%;overflow-x:hidden;}