通过navigator.userAgent来判断设备类型,在需要差异化定制样式的地方,给相应的元素添加设定好的class。
// ios顶部留出20px高度
.havetop {
.my-header {
padding-top: 20px;
}
.content {
padding-top: 20px;
}
}
.isios {
.my-header {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
.content {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
}
<script>
window.onload = function () {
document.getElementById('app').classList.add('havetop');
if (/iPhone/.test(navigator.userAgent)) {
document.getElementById('app').classList.add('isios');
}
}
</script>