Shlop
@Shlop
Начинающий программист

Как в зависимости от устройства (пк, телефон) загружать нужные css стили?

Здравствуйте подскажите пожалуйста как можно сделать так, что если пользователь зашел с ПК на сайт у него подгрузились css для ПК а если зашел с телефона то css для телефона ?
  • Вопрос задан
  • 531 просмотр
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
Код ниже рабочий, вам нужно только свои значения вставить. Все благодарности сюда. Функция срабатывает только один раз при загрузке.

Если нужно делать адаптивно, т. е. чтобы стили могли подгружаться при изменении окна браузера, а не только при загрузке, то нужно прикручивать событие изменения габаритов окна и проверки. Проверки -- чтобы после загрузки, при новом изменении размера, скрипт в head больше не встраивал ссылку на нужный CSS (проблем особо это не сделает, но зачем нам это нужно).

// Функция загрузки CSS или JS, править не нужно.
function loadjscssfile(filename, filetype) {
    if (filetype=="js") { //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css") { //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
};

// Вот тут нужно править под конкретные нужды.
function appendAssets() {
    if (window.innerWidth <= 767) {
        loadjscssfile("small.css", "css"); // передаем в функцию путь до файла и расширение
    }
    else if (window.innerWidth <= 1299 && window.innerWidth >= 768) {
        loadjscssfile("medium.css", "css"); // передаем в функцию путь до файла и расширение
    }
    else if (window.innerWidth >= 1300) {
        loadjscssfile("big.css", "css"); // передаем в функцию путь до файла и расширение
    }
};

// Инициализация конечной функции 
appendAssets();
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
По HTTP заголовку User-Agent можно определить с какого устройства зашел пользователь. Пример либы

P.S. Если вы решили сделать так responsive, то лучше не надо, почитайте лучше про @media.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы