Javascript-форум - распознание устройства и подгрузка css

Javascript-форум (https://javascript.ru/forum/)

- Мобильный JavaScript (https://javascript.ru/forum/mobile/)

- - распознание устройства и подгрузка css (https://javascript.ru/forum/mobile/65140-raspoznanie-ustrojjstva-i-podgruzka-css.html)

распознание устройства и подгрузка css

Добрый день, форумчане. такая ситуация. при загрузки страницы в секции head, скрипт определяет userAgent и в эту же секцию добавляет подключение файлов стилей, в зависимости от устройства. Мобильное устройство - css для мобильников и для стационарных устройств соотвественно.
Все это выглядит вот так:

<head>
<script>
if( /Android|webOS|iPhone|iPad|iPod|Windows Phone|Opera Mini/i.test(navigator.userAgent) ) {
  $("head").append($('<link href="css/mobile.min.css" type="text/css" rel="stylesheet">'));
} else {
  $("head").append($('<link href="css/style.min.css" type="text/css" rel="stylesheet">'));
  console.log("desktopVersion")
}
</script>
//сюда будет вставлен <link> со стилями
</head>
<body>
...
</body>

проблема в том, что при загрузке всей страницы, видно все теги html,белый фон и только потом к ним подключается файл css.
Как сделать так, чтобы с начала загружались стили соответствующие а только потом остальной html

p.s
Слишком не адаптивный дизайн, что использовать @media :no:

Если это необходимо, определять UA должен сервер, и пулять уже нужный стиль. Некоторые мобильные браузеры вообще игнорят скрипты.
Но если так хочется, то:

<head>
<script>
if( /Android|webOS|iPhone|iPad|iPod|Windows Phone|Opera Mini/i.test(navigator.userAgent) ) {
  document.write('<link href="css/mobile.min.css" type="text/css" rel="stylesheet">');
} else {
  document.write('<link href="css/style.min.css" type="text/css" rel="stylesheet">');
  console.log("desktopVersion")
}
</script>
</head>

Собсно это одно из редких легальных применений document.write.