Border 1px and 1rem display problems on mobile

set the border value to 1px solid-sharpccc, does not display the border on the iPhone but can be displayed on the Android phone. Changing the unit to rem will display normally on the iPhone, but not on the Android phone. Is there any solution to make it work on both devices?

Css
Mar.30,2021

you can judge whether the terminal is android or ios, and then add the corresponding class, to display respectively according to different environments, so that you can be compatible with both ios and android.

Code to determine whether android is ios or not

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) if Android
var oDiv = document.getElementById ('oDiv');
oDiv.className =' android-border';

added class:

.android-border {
    border: 1px solid -sharpccc
}

(2) if it is ios
var oDiv = document.getElementById ('oDiv');
oDiv.className =' ios-border';

added class:

.ios-border {
    border: 1rem solid -sharpccc
}

Summary

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';
}

this code is written according to the instructions of the subject. There is no personal test. The owner can try

.
Menu