前端兼容性

# 前端兼容性分类

• 浏览器兼容性
• 屏幕分辨率兼容性
• 跨平台兼容性

# 浏览器兼容性

  IE是所有兼容性问题的最大根源，堪称前端噩梦。

• IE6、7、8不支持HTML5、CSS3、SVG标准，可被判定为“极难兼容”。
• IE9不支持Flex、Web Socket、WebGL，可被判定为“较难兼容”。
• IE10部分支持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”。
• IE11部分支持Flex、WebGL，可被判定为“较易兼容”。

CSS3浏览器兼容

# 屏幕分辨率兼容性

• 典型的桌面屏幕分辨率：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 代码...;
}

多媒体类型

实例：

@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