Подключить другой файл JavaScript или CSS в зависимости от расширения экрана

Подключить другой JavaScript или css файл в зависимости от расширения экрана актуально для тех, заботится о посетителях сайта с мобильных телефонов.

Всем известно, что бы сайт красиво отображался на всех устройствах, необходимо использовать разные файлы css и различные скрипты. В данное время это очень актуально.

JavaScript - подключить скрипт  в зависимости от расширения экрана.

Для того, что бы подключить другой script для посетителя с мобильного телефона, расширение у которых меньше 768px, пишем вот так

<script>
var script = document.createElement('script');
document.head.appendChild(script);
script.src = (window.screen.width > 768) ? "/js/script-pc.js" : "/js/script-mobi.js";
</script>

Теперь в зависимости от раширения экрана подключиться javascript для персонального компьютера или для смартфона.

Будьте внимательны, на ПК при изменении ширины окна браузера такой фокус не пройдёт.

CSS - подключить файл стилей в зависимости от расширения экрана.

Что бы подключить другой файл стилей css для мобильной версии сайта, необходимо написать так

<script language="JavaScript">
if (screen.width <= '768) {
   document.write ('<link rel="stylesheet" href="/js/style768.css" />');
}
else
{
 document.write ('<link rel="stylesheet" href="/js/style.css" />');
}
</script>

В этом случае, для смартфона или планшета, подключиться другой файл css