前端兼容性分类
- 浏览器兼容性
- 屏幕分辨率兼容性
- 跨平台兼容性
浏览器兼容性
IE是所有兼容性问题的最大根源，堪称前端噩梦。
-
IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容”。
-
IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容”。
-
IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”。
-
IE11部分支持Flex、WebGL，可被判定为“较易兼容”。
CSS3浏览器兼容
| 前缀 | 内核 | 浏览器 |
|---|---|---|
| -webkit- | webkit渲染引擎 | chrome/safari |
| -moz- | gecko渲染引擎 | Firefox |
| -ms- | trident渲染引擎 | IE |
| -o- | opeck渲染引擎 | Opera |
屏幕分辨率兼容性
-
典型的桌面屏幕分辨率：1920x1080
-
典型的便携屏幕分辨率：1366x768
-
典型的平板屏幕分辨率：1920x1200
-
典型的移动屏幕分辨率：360x640
手机屏幕分辨率说明
由于手机屏幕尺寸过小，使用原始分辨率会使得页面显示过小，因此使用了逻辑分辨率，用倍数放大的方法来保证兼容性。
比如： iOS app的UI资源区分@1x、@2x和@3x，这就是指原始分辨率对逻辑分辨率的倍数，被称为设备像素比DPR。
大部分人的手机分辨率都是1080x1920，在分类中却被归为了360x640，这个分辨率和CSS中的PX是一致的。
桌面屏幕分辨率说明
移动设备一开始就考虑了DPR，而Windwos桌面的分辨率由于历史原因却没有这一概念，
于是Windwos引入了DPI，最初是设置DPI，后来是设置DPI比例。比如设置DPI比例=125%，你可以查询Chrome的window.devicePixelRatio，
这时输出1.25，这说明DPI比例=DPR。
但是大部分老程序并不支持DPI（Unaware），所以当你设置高DPI时，只能等比放大，字模糊到眼要瞎，最后落得空有大屏只能用超低分辨率。
由于Chrome支持DPI，所以并不担心Web有DPI问题。但需要注意的是与手机屏幕分辨率不同，桌面分辨率要除以DPI比例，才是逻辑分辨率。
如1920x1080设置DPI比例=1.25，逻辑分辨率实际为1536x864。
媒体查询
媒体查询可用于检测很多事情
例如：
- viewport(视窗) 的宽度与高度
- 设备的宽度与高度
- 朝向 (智能手机横屏，竖屏) 。
- 分辨率
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。
语法：
@media not|only mediatype and (expressions) {
CSS 代码...;
}
多媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
实例：
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
跨平台兼容性
大型网站，手机网站与桌面网站是不同的入口，因此不存在兼容，是两个单独的应用程序。
对于流量较小的网站，平台的兼容策略主要是应用响应式框架(比如：normalize.css、Bootstrap 等)，加上移动端主菜单与导航栏即可，其次可以选用跨平台框架来实现在不同平台的差异化体验。
没有这些框架对于Web网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用，则需要认真考虑这些框架，毕竟用户对本地应用的体验期待要高很多。
常见兼容性问题
常见的主要是浏览器的兼容性问题，因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
CSS兼容问题
1、不同浏览器的标签默认的内外边距不同
解决方案：*{margin: 0; padding: 0;}
2、图片加a标签在IE9中会有边框
解决方案：img{border: none;}
3、IE6及更低版本中，部分块元素拥有默认高度
解决方案：给元素设置font-size: 0;
4、a标签蓝色边框
解决方案：a{outline: none;}
5、IE9以下浏览器不能使用opacity
解决方案：Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter
6、IE6/7不支持display:inline-block
解决方案：{display: inline-block; *display: inline;}
7、cursor兼容问题
解决方案：统一使用{cursor: pointer;}
8、相邻元素设置margin边距时，margin将取最大值，舍弃小值
解决方案：不让边距重叠，可以给子元素加一个父元素，并设置该父元素设置：{overflow: hidden}
9、li中内容超过长度时，用省略号显示
li{ width: 200px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; }
10、在Chrome中字体不能小于10px
解决方案：p{font-size: 12px; transform: scale(0.8);}
JS兼容问题
1、事件对象的兼容
e = ev || window.event
2、滚动事件的兼容
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
3、阻止冒泡的兼容
if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; }
4、阻止默认行为的兼容
if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }
5、添加事件监听器的兼容
if (target.addEventListener) { target.addEventListener("click", fun, false); } else { target.attachEvent("onclick", fun); }
6、ajax创建对象的兼容
var xhr = null； if (window.) { xhr = new ; } else { xhr = new ActiveXObject("Microsoft XMLHTTP"); }
手机端兼容问题
1、内容显示问题
解决方案：<meta content="telephone=no" name="format-detection" />
2、禁止iOS和Android用户选中文字
解决方案：-webkit-user-select:none
