Заменить страницу на основе размера экрана

Question

Я пытаюсь перенаправить страницы на основе размеров экрана, у меня есть два разных индексных файла, один для мобильной версии сети, а второй для веб-версии.

на файл веб-версию индекса Я включил:

<script> 
    if (screen.width <= 767) window.location.replace("./m/index.html") 
     else window.location.replace("index.html") 
</script> 

и на странице мобильного индекса Я включил:

<script> 
    if (screen.width >= 767) window.location.replace("../index.html") 
     else window.location.replace("index.html") 
</script> 

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

что-то вроде проблемы здесь, оцените вашу помощь.

Answer 1

Вы можете использовать javascript-событие resize, как сказал Тушар.

window.addEventListener("resize", getTemplate); 

CurrentPage = 'DesktopPage'; 

function getTemplate() { 
    if (screen.width >= 767 && CurrentPage != 'DesktopPage') { 
     return window.location.replace("desktop.html"); 
    } 

    if (screen.width < 767 && CurrentPage != 'MobilePage') { 
     return window.location.replace("mobile.html"); 
    } 
} 

getTemplate(); 

Это будет проверять текущую страницу и размер экрана, потому что нет никакого смысла для перенаправления на страницу рабочего стола, если у вас уже есть на странице Desktop.

---

Вы также можете добавить другие версии, такие как «SmallerMobilePage».

window.addEventListener("resize", getTemplate); 

CurrentPage = 'SmallerMobilePage'; 

function getTemplate() { 
    if (screen.width >= 767 && CurrentPage != 'DesktopPage') { 
     return window.location.replace("desktop.html"); 
    } 

    if (screen.width < 767 && CurrentPage != 'MobilePage') { 
     return window.location.replace("mobile.html"); 
    } 

    if (screen.width <= 480 && CurrentPage != 'SmallerMobilePage') { 
     return window.location.replace("smaller_mobile.html"); 
    } 
} 

getTemplate();