Ширина экрана как условие перенаправления на другой URL-адрес во время загрузки

Question

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

мобильная версия веб-сайта полностью отличается от моего настольного компьютера, поэтому в основном я спрашиваю только, можно ли загрузить другой INDEX. html, когда запрос приходит с меньшего экрана. также: можно ли комбинировать только javascript, css и html? (без jquery) огромное спасибо!

Answer 1

Все вышеперечисленное можно решить просто с помощью JavaScript.

Сначала нам нужно получить ширину, поэтому мы можем вызвать window.innerWidth или document.clientWidth для этого.

Далее нам нужно перенаправить, если он меньше определенного количества пикселей, поэтому используйте window.location.

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

function redirectMobileHandler() {
  const width = Math.max(document.clientWidth || 0, window.innerWidth || 0);
  if(width < 1000) {
    window.location = 'https://linktoyourmobilesite.com';
  }
}

window.onload = redirectMobileHandler();
window.onresize = () => redirectMobileHandler();

В качестве альтернативы вы можете выполнить проверку пользовательского агента либо с помощью window.navigator на стороне клиента, либо с помощью заголовка User-Agent на стороне сервера, чтобы определить, какой тип устройство оно есть.

Answer 2

Приведенные ответы являются работоспособными, если вас интересует только ширина экрана браузера. Но если вам нужно зафиксировать фактическую ширину экрана устройства, вам нужно использовать свойство screen.

function redirectToMobile() {
        if(screen.width < 1000) {
            window.location = 'YOUR LOCATION';
        }
    }
    
window.onload = redirectToMobile();  

Answer 3

Как вы сказали, вы можете поймать ширину, на которой хотите загрузить другую страницу

// when width equal 500px
if (window.innerWidth === 500) {
  //window.location = "path to new page"
}

надеюсь, что это помогло