Widok strony dla mobile

pytanie zadane 14 marca 2018 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)

Mam stworzone dwa osobne pliki HTML z widokiem dla desktop oraz mobile. Chciałbym, żeby dla width < 768px został załadowany widok mobile.html.

Jak to zrobić, żeby podczas zmniejszania szerokości strony, poniżej 768px,został załadowany plik mobile.html zamiast dekstop.html?

Próbowałem w pliku z js dodać kod poniżej, ale nie udało się uzyskać pożądanego efektu:

if (screen.width < 768) {
    document.location = "mobile.html";
}

2 odpowiedzi

odpowiedź 14 marca 2018 przez Daniel90 Pasjonat (17,970 p.)

Dlaczego 2 pliki html? Łatwiej zrobić to na media queries w css, nie trzeba podwójnie pisać treści.

komentarz 14 marca 2018 przez kralcz88 Obywatel (1,810 p.)

Właśnie na potrzeby tego projektu muszą być dwa osobne pliki html. Tylko nie wiem jak teraz wybrnąć z sytuacji. Da się w ogóle zrobić to tak jak opisałem?

komentarz 14 marca 2018 przez Daniel90 Pasjonat (17,970 p.)

Mam gotowe rozwiązanie, trochę się naszukałem :)

do desktop.html w head dajesz

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(window).on('load resize',function(){
        if($(window).width() < 768){
            window.location = "mobile.html"
        }
    });
</script>

a do mobile.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(window).on('load resize',function(){
        if($(window).width() > 768){
            window.location = "index.html"
        }
    });
</script>