Мое веб-приложение ориентировано на основные смартфоны, и мне нужно изменить файл CSS в соответствии с устройством (если есть проблемы в пользовательском интерфейсе, необходимо их устранить), и я планирую заменить CSS, используя следующий jQuery. Просто хотите знать, является ли это наилучшей практикой и хороша ли она для производительности?
<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
// css file based on the device
var controlCss;
// get the device agent and conver to lover case
var deviceAgent = navigator.userAgent.toLowerCase();
if(deviceAgent.match(/android/i)){
controlCss = "android.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/webso/i)){
controlCss = "webOS.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/iphone/i)){
controlCss = "iphone.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/ipod/i)){
controlCss = "ipad.css";
$(".cssLink").attr("href", controlCss);
}
else if(deviceAgent.match(/blackberry/i)){
controlCss = "bb.css";
$(".cssLink").attr("href", controlCss);
}
else {
controlCss = "basic.css";
$(".cssLink").attr("href", controlCss);
}
});
</script>