鍍金池/ 問(wèn)答/HTML/ border 1px 和 1rem 在移動(dòng)端顯示問(wèn)題

border 1px 和 1rem 在移動(dòng)端顯示問(wèn)題

把 border 值設(shè)置為 1px solid #ccc，在蘋果手機(jī)上不顯示邊框但在安卓手機(jī)上能顯示，把單位換成 rem 能正常在蘋果手機(jī)顯示，但是在安卓手機(jī)上就不顯示了，有什么解決方案能讓其在兩種設(shè)備都正常顯示嗎？

回答
編輯回答
命多硬

可以對(duì)終端進(jìn)行判斷，是android還是ios,然后根據(jù)不同的環(huán)境分別添加對(duì)應(yīng)的class,來(lái)進(jìn)行分別顯示，這樣就可以同時(shí)兼容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
}

總結(jié)

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的對(duì)象
if(isAndroid) {
    oDiv.className = 'android-border';
    //如果已有class,則換成下面這行，
    //oDiv.className += 'android-border';
}
if(isiOS) {
    oDiv.className = 'ios-border'; 
    //如果已有class,則換成下面這行，
    //oDiv.className += 'ios-border';
}

這段代碼是根據(jù)題主的說(shuō)明進(jìn)行編寫(xiě)的，具體沒(méi)有親自測(cè)試，題主可以嘗試一下

2017年2月21日 15:29