• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Widok strony dla mobile

0 głosów
87 wizyt
pytanie zadane 14 marca 2018 w HTML i CSS przez kralcz88 Obywatel (1,730 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

0 głosów
odpowiedź 14 marca 2018 przez Daniel90 Pasjonat (17,990 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,730 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?
1
komentarz 14 marca 2018 przez Daniel90 Pasjonat (17,990 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>

 

komentarz 14 marca 2018 przez kralcz88 Obywatel (1,730 p.)
Super! Wszystko działa jak należy :) Zapamiętam sobie to rozwiązanie na przyszłość!

Dzięki za bardzo za pomoc!
0 głosów
odpowiedź 14 marca 2018 przez EdeX Gaduła (4,600 p.)
Możesz użyć user agenta

Podobne pytania

0 głosów
2 odpowiedzi 71 wizyt
pytanie zadane 20 stycznia w HTML i CSS przez nielotweb Bywalec (2,020 p.)
0 głosów
2 odpowiedzi 81 wizyt
pytanie zadane 25 marca 2018 w HTML i CSS przez pietia213 Mądrala (6,800 p.)
+1 głos
2 odpowiedzi 82 wizyt
pytanie zadane 7 września 2015 w HTML i CSS przez Mizukage Pasjonat (21,890 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

64,868 zapytań

111,331 odpowiedzi

234,217 komentarzy

46,731 pasjonatów

Przeglądających: 214
Pasjonatów: 5 Gości: 209

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...