前端兼容性_flex布局浏览器兼容性

前端兼容性分类

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

浏览器兼容性

  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 代码...;
}
1
2
3

多媒体类型

实例：

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
1
2
3
4
5

跨平台兼容性

  大型网站，手机网站与桌面网站是不同的入口，因此不存在兼容，是两个单独的应用程序。

  对于流量较小的网站，平台的兼容策略主要是应用响应式框架(比如：normalize.css、Bootstrap 等)，加上移动端主菜单与导航栏即可，其次可以选用跨平台框架来实现在不同平台的差异化体验。
没有这些框架对于Web网站来说不造成大的体验下降。而如果需要开发混合移动、桌面应用，则需要认真考虑这些框架，毕竟用户对本地应用的体验期待要高很多。

常见兼容性问题

  常见的主要是浏览器的兼容性问题，因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

CSS兼容问题

1、不同浏览器的标签默认的内外边距不同

解决方案：*{margin: 0; padding: 0;}
1

2、图片加a标签在IE9中会有边框

解决方案：img{border: none;}
1

3、IE6及更低版本中，部分块元素拥有默认高度

解决方案：给元素设置font-size: 0;
1

4、a标签蓝色边框

解决方案：a{outline: none;}
1

5、IE9以下浏览器不能使用opacity

解决方案：Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter
1

6、IE6/7不支持display:inline-block

解决方案：{display: inline-block; *display: inline;}
1

7、cursor兼容问题

解决方案：统一使用{cursor: pointer;}
1

8、相邻元素设置margin边距时，margin将取最大值，舍弃小值

解决方案：不让边距重叠，可以给子元素加一个父元素，并设置该父元素设置：{overflow: hidden}
1

9、li中内容超过长度时，用省略号显示

li{ width: 200px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; }
1

10、在Chrome中字体不能小于10px

解决方案：p{font-size: 12px; transform: scale(0.8);}
1

JS兼容问题

1、事件对象的兼容

e = ev || window.event
1

2、滚动事件的兼容

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
1

3、阻止冒泡的兼容

if (e.stopPropagation) { e.stopPropagation; } else { e.cancelBubble=true; }
1

4、阻止默认行为的兼容

if (e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }
1

5、添加事件监听器的兼容

if (target.addEventListener) { target.addEventListener("click", fun, false); } else { target.attachEvent("onclick", fun); }
1

6、ajax创建对象的兼容

var xhr = null； if (window.) { xhr = new ; } else { xhr = new ActiveXObject("Microsoft XMLHTTP"); }
1

手机端兼容问题

1、内容显示问题

解决方案：<meta content="telephone=no" name="format-detection" />
1

2、禁止iOS和Android用户选中文字

解决方案：-webkit-user-select:none
1