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

Question

Понимаю, что вопрос тупой, но мне хочется получить однозначный ответ. Как сайт должен определять, на каком устройстве он работает ? А то на мобильных устройствах всё плывёт:< p.s На всякий случай, если это вдруг как-то связанно, то я работаю в Django

Answer 1

Как сайт должен определять, на каком устройстве он работает ?

Вариант javascript, определяет устройство:

const devices = new RegExp('Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini', "i");
if (devices.test(navigator.userAgent)) {
  alert("Вы используете мобильное устройство")
} else {
  alert("Вы используете ПК")
}

А то на мобильных устройствах всё плывёт

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

const block = document.getElementById('block');
const devices = new RegExp('Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini', "i");
if (devices.test(navigator.userAgent)) {
  block.classList.add("mobil");
} else {
  block.classList.add("pk");
}

.mobil::before {
  content: "Вы используете мобильное устройство";
  background: red;
}

.pk::before {
  content: "Вы используете ПК";
  background: green;
}

<div id="block"></div>

Или воспользуемся простым медиа-запросом:

@media screen and (max-width: 800px) {
  #block::before {
    content: "Вы используете мобильное устройство";
    background: red;
  }
}

@media screen and (min-width: 801px) {
  #block::before {
    content: "Вы используете ПК";
    background: green;
  }
}

<div id="block"></div>

Или так:

@media handheld {
  #block::before {
    content: "Вы используете мобильное устройство";
    background: red;
  }
}

@media screen {
  #block::before {
    content: "Вы используете ПК";
    background: green;
  }
}

<div id="block"></div>

Подробнее о медиа-запросах можно почитать, например, здесь: Медиа-запросы

Дополнительно будет полезно почитать о том, что такое адаптивный веб-дизайн.

Желаю успехов в обучении!

upd по комментарию:

А есть возможность в зависимости от определившегося устройства присоединять разные css файлы ?

Пример подключения внешнего css-файла через javascript:

const linkCSS = document.createElement("link");
document.getElementsByTagName("head")[0].appendChild(linkCSS);
linkCSS.rel = "stylesheet";
linkCSS.type = "text/css";
linkCSS.href = "ваш_файл.css";

Но лучше этого не делать.

БЛОГ НА HUSL

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

Ответы (1 шт):