可以对终端进行判断,是android还是ios,然后根据不同的环境分别添加对应的class,来进行分别显示,这样就可以同时兼容ios和android。
判断android还是ios的代码
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android:'+isAndroid);
alert('是否是iOS:'+isiOS);
(1)如果是安卓
var oDiv = document.getElementById('oDiv');
oDiv.className = 'android-border';
添加的class:
.android-border {
border: 1px solid #ccc
}
(2)如果是ios
var oDiv = document.getElementById('oDiv');
oDiv.className = 'ios-border';
添加的class:
.ios-border {
border: 1rem solid #ccc
}
总结
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var oDiv = document.getElementById('oDiv'); // 获取需要添加的class的对象
if(isAndroid) {
oDiv.className = 'android-border';
//如果已有class,则换成下面这行,
//oDiv.className += 'android-border';
}
if(isiOS) {
oDiv.className = 'ios-border';
//如果已有class,则换成下面这行,
//oDiv.className += 'ios-border';
}
这段代码是根据题主的说明进行编写的,具体没有亲自测试,题主可以尝试一下