前端兼容性解决方案

//******************************************************************************
//***********************--------------js篇--------------***********************
//******************************************************************************
//判断是否是微信
function isWX(){
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) != 'micromessenger')
{
return false;
}else{
return true;
}
}
//移动端版本兼容 START 在引用css的下面引用此js
var w = 750;
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/w;

var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
// andriod 2.3
if(version>2.3){
document.write('<meta name="viewport" content="width= ' + w + ', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-
densitydpi=device-dpi">');
// andriod 2.3以上
}else{
document.write('<meta name="viewport" content="width= ' + w + ', target-densitydpi=device-dpi">');
}
// 其他系统
} else {
document.write('<meta name="viewport" content="width= ' + w + ', user-scalable=no, target-densitydpi=device-dpi">');
}
//移动端版本兼容 END
<script>在引用css的下面引用此js,或在引用css的下面写此js
var url = window.location.href;
var isAdaption = "Y";
if(url.indexOf("#doNotAdaption")!=-1){
isAdaption="N";
}
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
Mobile: function() {
return navigator.userAgent.match(/mobile/i) ? true : false;
},
UC: function() {
return navigator.userAgent.match(/linux/i) ? true : false;
},
any: function() {
var flag = false;
if (isMobile.Android()) flag = true;
if (isMobile.BlackBerry()) flag = true;
if (isMobile.iOS()) flag = true;
if (isMobile.Windows()) flag = true;
if (isMobile.Mobile()) flag = true;
if (isMobile.UC()) flag = true;
return flag;
}
};
if (isMobile.any()&&isAdaption=="Y") {
window.location.href = "/microWebsite/index.html";
}
</script>

//window.location 最好用此跳转链接

//获取鼠标坐标
IE：event.offsetX和event.offsetY
FF：event.layerX和event.layerY
兼容代码：
function mouseDownHandler(event) {
var event = event || window.event;
var x = event.offsetX || event.layerX;
var y = event.offsetX || event.layerY;
}

// event.srcElement
说明：返回触发事件的元素。只读属性。
IE：event对象有srcElement属性，但是没有target属性
FF：even对象没有srcElement属性，但是有target属性
兼容代码：使用 var obj = event.srcElement ? event.srcElement : event.target; 来代替IE下的event.srcElement或者FF下的event.target。

// event.toElement
说明：检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素。只读属性。
IE：event对象有toElement属性，但没有relatedTarget属性
FF：event对象没有toElement属性，但有relatedTarget属性
兼容代码：var target = event.toElement || event.relatedTarget;

// 窗体的高度和宽度
兼容代码：使用兼容属性document.body.clientWidth和document.body.clientHeight。

// 标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以用div1.value和div1["value"]取得该值。
FF：不能用div1.value或div1["value"]取值。
兼容代码：div1.getAttribute("value")

// document.form.item 问题(获取页面id为formName的form表单中id为itemName的元素)
IE：
FF：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 FF 下运行
兼容代码：document.formName.elements["elementName"]
//******************************************************************************
//***********************--------------css篇--------------**********************
//******************************************************************************
1，在css文件开头（便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。因此用通配符*来设置各个标签的内外补丁是0。）
*{margin:0;padding:0;}
2，在float的标签样式控制中加入 display:inline;将其转化为行内属性
eg:.TabconB li{width:86px; height:35px; line-height:35px; float:left; display:inline;}