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

Evelyn
  • 258

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

回复
阅读 3k
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';
}

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

宣传栏