桌面浏览器
- IE8+
- Opera 12+
- Firefox 4+
- Safari 5+
- Chrome 10+
移动浏览器
- IOS 4+ Safari
- Chrome for Android
- Chrome for IOS
- Chrome for Android
- Windows Phone 8+ IE
在最新的浏览器都能获得最佳体验,但一些古老的浏览器上(例如IE8)ZUI中的部分特性(例如圆角或阴影效果)无法使用。
在最新的浏览器都能获得最佳体验,但一些古老的浏览器上(例如IE8)ZUI中的部分特性(例如圆角或阴影效果)无法使用。
浏览器检测提供对IE6~IE9版本间的检测功能,不检测更高版本的IE浏览器和Microsoft edge浏览器。
为方便开发者更加方便的处理IE系列浏览器的兼容性问题,ZUI中内置了IE版本检测功能,并为<body>
元素增加了一些辅助类。使用辅助类可以方便的为特定版本或者一系列版本的IE浏览器应用单独的样式,或者使用JS来作单独处理。
可能使用的辅助类含义如下:
类名 | 对应的IE版本 | 描述 |
---|---|---|
.support-ie |
IE版本>=8 | 此浏览器为ZUI中受支持的IE版本 |
.outdated-ie |
IE版本>=8 | 此浏览器为ZUI中不受支持的IE版本 |
.ie-α |
IE版本=α | 如果当前IE版本为8,则为.ie-8 |
.gt-ie-α |
IE版本<α | .gt-ie-7 则表示当前浏览器版本大于7,即大于或等于版本8 |
.gte-ie-α |
IE版本>=α | .gte-ie-8 则表示当前浏览器版本大于等于8 |
.lt-ie-α |
IE版本<α | .lt-ie-8 则表示当前浏览器版本小于8 |
.lte-ie-α |
IE版本<=α | .lte-ie-7 则表示当前浏览器版本小于等于7 |
ZUI提供$.zui.browser
对象来检测IE版本。此对象包含以下方法和属性:
$.zui.browser.ie |
获取当前IE版本值 |
$.zui.browser.isIE(version) |
判断当前浏览器是否是特定IE版本,如果满足条件返回true ,反之返回false ;version参数可选,如果为空,则只要是IE浏览器就返回true |
当用户使用一个较低版本的不受ZUI支持的浏览器时,页面可能无法得到最低预期效果。此时建议向用户显示一个信息,并提示用户升级到最新的浏览器。
ZUI提供$.zui.browser.tip()
方法在页面顶部显示一条友好的信息,并引导用户访问browsehappy.com来升级到更好的浏览器。此方法接受一个参数用来自定义自己的消息文本。
// 显示低版本提示信息
$.zui.browser.tip();
// 显示自定义的低版本提示信息
$.zui.browser.tip('哇~~~你的浏览器版本也太低了,快快升级吧!');
在IE7及更低IE版本的浏览器上会自动显示低版本提示信息,所以一般情况下,你无须自己手动调用此方法。