受支持的平台

桌面浏览器

移动浏览器

在最新的浏览器都能获得最佳体验,但一些古老的浏览器上(例如IE8)ZUI中的部分特性(例如圆角或阴影效果)无法使用。

浏览器检测

浏览器检测提供对IE6~IE9版本间的检测功能,不检测更高版本的IE浏览器和Microsoft edge浏览器。

IE版本辅助类

为方便开发者更加方便的处理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

在Javascript中判断浏览器版本

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版本的浏览器上会自动显示低版本提示信息,所以一般情况下,你无须自己手动调用此方法。