Как при определённых разрешениях экрана изменять html файлы?

Question

[Daniil]

У меня есть код двух сайтов . Один предназначен для разрешения больше 720px ,а другой меньше 720px. Их дизайн очень сильно отличается поэтому вариант с media в css отпадает. Как мне сделать так чтобы если пользователь заходил с мобильного устройства то загружался второй сайт , а если с десктопа то первый сайт. Возможно ли как то это сделать с помощью js ? Есть вариант заменять сам html файл на другие теги и стили , но мне кажется это не правильно. Подскажите пожалуйста.

Comments

[iBird Rose]

ну самый простой способ - сделай мобильную версию на другом поддомене по типу m.site.ru
и делай редирект, когда человек заходит с мобильных устройств

Answer 1

[ForSureN1]

const screenWidth = window.screen.width
const screenHeight = window.screen.height
получаем данные экрана юзера,
сделать проверку,
и выдавать ему то, что ты хочешь

Answer 2

[Karpion]

Ну, можно сделать два сайта; при загрузке каждой страницы надо проверять разрешение и в случае несовпадения редиректить на другой сайт.

Answer 3

[artloveyou]

Размер так можно отслеживать

function checkWidth() {
  if (window.innerWidth < 480) 
     console.log('что-то одно')
  else 
     console.log('что-то другое')
}

window.addEventListener('resize', function (event) {
   checkWidth();
}, true);

https://jsfiddle.net/10Lxhd4t/