border 1px 和 1rem 在移动端显示问题

Question

把 border 值设置为 1px solid #ccc，在苹果手机上不显示边框但在安卓手机上能显示，把单位换成 rem 能正常在苹果手机显示，但是在安卓手机上就不显示了，有什么解决方案能让其在两种设备都正常显示吗？

Answer 1

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

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