Как сделать чтобы на мобильных устройствах масштаб страницы не увеличивался?

Question

[ThePositree]

На мобильных устройствах при открытии страницы масштаб больше чем 1:1, не могу понять в чем причина.
В js использован вот такой код для мета тега viewport(так попросил сделать владелец сайта,что бы небыло адаптива после 570px):

const mediaQuery = window.matchMedia('(max-width: 570px)')

function viewPortMobile(e) {
  if (e.matches) {
    document.querySelector('meta[name="viewport"]').setAttribute("content", "width=560, initial-scale=1");
  } else {
    document.querySelector('meta[name="viewport"]').setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
  }
}
mediaQuery.addEventListener('change', viewPortMobile)

viewPortMobile(mediaQuery)

Так вот, при открытии сайта на устройствах с шириной ниже 570px в мета теге viewport content = width=560, initial-scale=1, исходя из того что стоит initial-scale=1 сайт не должен масштабироваться при открытии или перезагрузке,либо я чего-то непонимаю или может быть в коде ошибка, help me pls.
Сайт можно открыть на гит странице по ссылке: Сайт

Answer 1

[goshaLoonny]

Если делать через JS, то Вам нужно менять не width, а initial-scale. Рассчитывать его и менять.
Но лучше делать это через CSS, мне кажется это будет более производительно (предположение)
p.s. Копипастить код не обязательно, есть же тернарные операторы

const mediaQueryList = window.matchMedia('(max-width: 570px)');

mediaQueryList.addEventListener('change', () => {
  document.querySelector('meta[name="viewport"]').setAttribute(
    'content',
    'width=device-width, user-scalable=no, initial-scale=' +
      (mediaQueryList.matches ? document.clientWidth / 570 : 1.0)
  );
});
mediaQueryList.dispatchEvent(new Event('change')); // Это эмулирует событие