1px问题在ios与android,border 1px 和 1rem 在移动端显示问题

可以对终端进行判断，是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';

}

这段代码是根据题主的说明进行编写的，具体没有亲自测试，题主可以尝试一下