Могу ли я использовать JavaScript для размещения одного элемента в разных местах, одного для мобильных устройств и одного для настольных компьютеров?

Question

Я добавляю элемент в дом, используя JavaScript. Я добавил использование insertBefore (), чтобы разместить его там, где я хочу, в мобильном представлении. Но на рабочем столе он должен быть размещен в другом месте на сайте. Как я могу решить это?

Просто использование CSS не подходит из-за уже существующих элементов, которые я не могу переместить.

    var priceWrapper = document.querySelector('.price-info-wrap')
    var mainContainer = document.querySelector('.price-info')
    var addUrgency = document.getElementById('urgency')
    priceWrapper.insertBefore(addUrgency, mainContainer)

Приведенный код - это то, как я разместил "addUrgency", ведь это div, который мне нужно поместить в другое место на рабочем столе.

Answer 1

Вы можете сделать это, но это плохая идея.

Расположите элементы, начиная с наименьшей необходимой ширины экрана, а затем оттуда работайте, используя Запросы CSS Media , чтобы настроить макет на определенной ширине экрана, как и когда вам нужно.

В этом случае, если вы не можете сделать это каким-либо другим способом, у вас могут быть оба элемента там, где они вам нравятся, а затем показать / скрыть в зависимости от ширины области просмотра.Что-то вроде:

@media (min-width:800px)  { 
   //your non-mobile styles and classes go here
   .desktop-element{
      display: inline-block;
   }
   .mobile-element{
      display:none;
   }
} 

Answer 2

Вы можете использовать событие onresize.Но я должен отметить, что наличие двух идентичных элементов (возможно, с использованием clone () для копирования #addUrgency) в DOM на своих местах и ​​отображение / не отображение их с помощью медиазапросов CSS вместо использования Javascript для повторной укладки элементов каждыйизменение размера окна просмотра - лучшее решение.Однако, чтобы ответить на ваш вопрос, это самый простой подход с использованием вашего кода.Также стоит отметить, что событие resize может срабатывать довольно быстро, поэтому вы, вероятно, захотите ограничить реле функции (ответы находятся в StackOverflow).

function relay(){
    var addUrgency = document.getElementById('urgency');
    if(`mobile view`){ //here goes a condition to determine what view you have. 
         var priceWrapper = document.querySelector('.price-info-wrap');
         var mainContainer = document.querySelector('.price-info');
         priceWrapper.insertBefore(addUrgency, mainContainer);
    }else{
         // Insert where you want it on desktop view
    }
}
window.onload = function() {
    relay();
    document.body.addEventListener("resize", relay);
};

Answer 3

Вы можете использовать navigator.userAgent и определить, является ли браузер мобильным браузером.Есть также вопрос с действительно хорошими ответами на это в StackOverflow: Обнаружение мобильного браузера

Другой вариант - проверить размер области просмотра с помощью javascript.Что может быть лучшим решением в случае, если у вас есть css-правила, которые реагируют на размер области просмотра, например: @media (width):

let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

После этого это простой if-else длярешить, где разместить свой элемент.